Điều quan trọng nhất khi thiết kế trang web là vị trí thích hợp của các phần tử. Điều này có thể được thực hiện dễ dàng bằng cách sử dụng các lớp “vị trí” Tailwind. Định vị có thể có nhiều loại khác nhau, một trong số đó là tĩnh.

Blog này sẽ trình bày cách định vị tĩnh phần tử.

Làm cách nào để định vị tĩnh một phần tử trong DOM – Tailwind?

Một phần tử có thể được định vị tĩnh bằng cách sử dụng “ tĩnh “loại chức vụ. Vị trí tĩnh là vị trí mặc định cho các phần tử HTML. Các phần tử có “ vị trí: tĩnh ” được định vị dựa trên luồng thông thường của trang mà không có bất kỳ kiểu CSS nào.

Cú pháp
Cú pháp áp dụng “ tĩnh ” lớp là:

Ở đây, phần tử có thể là bất kỳ thẻ nào có thể áp dụng thuộc tính vị trí.

Truy cập mã để triển khai thực tế định vị tĩnh:

Trong mã này:

• “ trung tâm văn bản ” điều chỉnh nội dung thẻ vào giữa màn hình.
• Đặt “

  ” gắn thẻ màu xanh lá cây bằng cách sử dụng “ văn bản-xanh-600 ”, cỡ chữ được đặt thành năm lần bởi “ văn bản-5 × 1 ” và phông chữ được nhấn mạnh bằng cách sử dụng “ chữ đậm ”.

• Hai '
  ” phần tử cũng được tạo và đặt vị trí tĩnh bên trái cho phần “ đầu tiên div ' sử dụng ' văn bản tĩnh bên trái ”.
• Chỉ định các lớp của “ p-2 ',' m-2 ',' bg-xanh-200 ',' h-48 ” cho div thứ hai và cũng đặt vị trí của nó ở dưới cùng bên trái bằng cách sử dụng “ tương đối dưới-0 trái-0 ' lớp học.

đầu ra
Lưu mã trên vào tệp và xem trước trang web được tạo bởi nó sẽ hiển thị dưới dạng:

Phần tử được định vị tĩnh di chuyển theo luồng trang bình thường trong khi phần tử còn lại giữ nguyên vị trí tuyệt đối.

Phần kết luận

Để định vị một phần tử tĩnh trong DOM theo luồng tài liệu thông thường, hãy sử dụng “ tĩnh “đẳng cấp của Tailwind” chức vụ ' tính thiết thực. Blog này đã chỉ ra cách định vị bất kỳ phần tử nào “ tĩnh tại ” với một minh họa thực tế đơn giản.