CSS tuyệt đối

Bây giờ bạn đang hình dung mọi thành phần trang đơn lẻ dưới dạng một khối pixel, chúng ta có thể nói về cách định vị được sử dụng để đưa các khối pixel chính xác đến nơi bạn muốn.

.el {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
  position: inherit;
}

static

Đây là giá trị mặc định cho mọi thành phần trang đơn. Các phần tử khác nhau không có các giá trị mặc định khác nhau để định vị, tất cả chúng đều bắt đầu bằng static. Tĩnh không có nhiều ý nghĩa; . Lý do duy nhất bạn từng đặt một phần tử thành position5 là để xóa mạnh một số vị trí đã được áp dụng cho một phần tử nằm ngoài tầm kiểm soát của bạn. Điều này khá hiếm, vì vị trí không xếp tầng

relative

Loại định vị này có lẽ là dễ gây nhầm lẫn và sử dụng sai nhất. Điều nó thực sự có nghĩa là “tương đối với chính nó”. Nếu bạn đặt position7 trên một phần tử nhưng không có thuộc tính định vị nào khác (position8, position9, absolute0 hoặc absolute1), nó sẽ không ảnh hưởng gì đến vị trí của phần tử đó, nó sẽ chính xác như vậy nếu bạn để nó là position5 Nhưng nếu bạn . Tôi chắc rằng bạn có thể tưởng tượng, khả năng dịch chuyển một phần tử xung quanh dựa trên vị trí thông thường của nó là khá hữu ích. Tôi thấy mình sử dụng điều này để sắp xếp các phần tử biểu mẫu nhiều lần có xu hướng không muốn xếp hàng theo cách tôi muốn

Có hai điều khác xảy ra khi bạn đặt position7 trên một phần tử mà bạn nên biết. Một là nó giới thiệu khả năng sử dụng absolute5 trên phần tử đó, tính năng này không hoạt động với các phần tử được định vị tĩnh. Ngay cả khi bạn không đặt giá trị absolute5, phần tử này giờ đây sẽ xuất hiện trên bất kỳ phần tử được định vị tĩnh nào khác. Bạn không thể chống lại nó bằng cách đặt giá trị absolute5 cao hơn cho phần tử được định vị tĩnh

Một điều khác xảy ra là nó giới hạn phạm vi của các phần tử con được định vị tuyệt đối. Bất kỳ phần tử nào là con của phần tử được định vị tương đối đều có thể được định vị tuyệt đối trong khối đó. Điều này mang đến một số cơ hội mạnh mẽ mà tôi nói ở đây

absolute

Đây là một kiểu định vị rất mạnh mẽ cho phép bạn đặt bất kỳ phần tử trang nào vào chính xác nơi bạn muốn. Bạn sử dụng các thuộc tính định vị position8, position9, absolute0 và absolute1 để đặt vị trí. Hãy nhớ rằng các giá trị này sẽ liên quan đến phần tử cha tiếp theo với vị trí tương đối (hoặc tuyệt đối). Nếu không có cha mẹ như vậy, nó sẽ mặc định sao lưu tất cả các phần tử fixed3, nghĩa là nó sẽ được đặt tương đối so với chính trang đó

Sự đánh đổi (và điều quan trọng nhất cần nhớ) về định vị tuyệt đối là các phần tử này bị xóa khỏi luồng các phần tử trên trang. Một phần tử có kiểu định vị này không bị ảnh hưởng bởi các phần tử khác và nó không ảnh hưởng đến các phần tử khác. Đây là một điều nghiêm túc cần xem xét mỗi khi bạn sử dụng định vị tuyệt đối. Việc sử dụng quá mức hoặc sử dụng không đúng cách có thể hạn chế tính linh hoạt của trang web của bạn

fixed

Phần tử vị trí fixed được định vị tương ứng với chế độ xem hoặc chính cửa sổ trình duyệt. Chế độ xem không thay đổi khi cửa sổ được cuộn, do đó, phần tử được định vị cố định sẽ ở đúng vị trí của nó khi cuộn trang

Điều này có thể được sử dụng cho một cái gì đó như thanh điều hướng mà bạn muốn luôn hiển thị bất kể vị trí cuộn của trang. Mối quan tâm với định vị cố định là nó có thể gây ra các tình huống trong đó phần tử cố định chồng lấp nội dung đến mức không thể truy cập được. Bí quyết là có đủ không gian để tránh điều đó và những thủ thuật như thế này

sticky

Định vị dính thực sự độc đáo. Một phần tử sticky sẽ chỉ nằm ở đó giống như một phần tử tĩnh, nhưng khi bạn cuộn qua nó, nếu phần tử cha của nó có chỗ trống (thường là. thêm chiều cao) phần tử cố định sẽ hoạt động như thể nó là fixed cho đến khi phần tử gốc đó hết chỗ. Nghe có vẻ lạ khi nói như vậy, nhưng thật dễ dàng để xem những gì đang xảy ra trong bản demo

Ý nghĩa tuyệt đối trong CSS là gì?

CSS tương đối và tuyệt đối là gì?

Sự khác biệt giữa tuyệt đối và cố định là gì?

Khi nào bạn nên sử dụng CSS định vị tuyệt đối?