Rate this post
Thuộc tính position có thể giúp bạn thao tác position của một phần tử, ví dụ:
.element {
position: relative;
top: 20px;
}
Liên quan đến position ban đầu của nó, phần tử ở trên bây giờ sẽ được di chuyển xuống từ trên cùng một đoạn 20px. Nếu chúng ta tạo animation cho các thuộc tính này, chúng ta có thể thấy điều này mang lại cho chúng ta bao nhiêu quyền kiểm soát (mặc dù đây không phải là ý tưởng hay vì lý do hiệu suất):
Relative chỉ là một trong sáu giá trị cho thuộc tính position.
Các bài viết liên quan:
Đây là những cái khác:
Position value
Static: mọi phần tử đều có position tĩnh theo mặc định, vì vậy phần tử sẽ dính vào luồng trang bình thường. Vì vậy, nếu có một định dạng left / right / top / bottom / z-index thì sẽ không có tác dụng đối với phần tử đó.
Relative: position ban đầu của phần tử vẫn nằm trong luồng tài liệu, giống như giá trị static. Nhưng bây giờ left / right / top / bottom / z-index sẽ hoạt động. Các thuộc tính position “nudge” phần tử từ position ban đầu theo hướng đó.
absolute: phần tử bị xóa khỏi luồng của tài liệu và các phần tử khác sẽ hoạt động như thể nó thậm chí không có ở đó trong khi tất cả các thuộc tính position khác sẽ hoạt động trên đó.
fixed: phần tử bị xóa khỏi luồng tài liệu giống như các phần tử được định vị tuyệt đối. Trên thực tế, chúng hoạt động gần như giống nhau, chỉ các phần tử được định vị fixed luôn liên quan đến tài liệu, không phải bất kỳ phần tử gốc cụ thể nào và không bị ảnh hưởng bởi việc Scroll.
sticky (experimental): phần tử được coi như một giá trị relative cho đến khi position Scroll của chế độ xem đạt đến ngưỡng được chỉ định, tại thời điểm đó phần tử sẽ có position fixed nơi nó được yêu cầu gắn vào.
inherit: giá trị position không phân tầng, vì vậy, giá trị này có thể được sử dụng để buộc nó một cách cụ thể và kế thừa giá trị định vị từ giá trị position mẹ của nó.
Absolute
Nếu phần tử con có giá trị tuyệt đối thì phần tử mẹ sẽ hoạt động như thể phần tử con hoàn toàn không có ở đó:
.element {
position: absolute;
}
Và khi chúng tôi cố gắng đặt các giá trị khác, chẳng hạn như left, bottom và right, chúng tôi sẽ thấy rằng phần tử con đang thay đổi không phải với phần tử cha mà là tài liệu:
.element {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Để làm cho phần tử con được định vị hoàn toàn từ phần tử mẹ của nó, chúng ta cần đặt điều này trên chính phần tử parent :
.parent {
position: relative;
}
Bây giờ các thuộc tính như left, right, bottom và top sẽ tham chiếu đến phần tử mẹ, vì vậy nếu chúng ta làm cho phần tử con trong suốt, chúng ta có thể thấy nó nằm ngay ở dưới cùng của phần tử mẹ:
Fixed
Giá trị fixed tương tự như Absolute vì nó có thể giúp bạn định vị một phần tử ở bất kỳ đâu so với tài liệu, tuy nhiên giá trị này không bị ảnh hưởng khi cuộn. Xem phần tử con trong bản trình diễn bên dưới và làm thế nào, khi bạn cuộn, nó tiếp tục dính vào cuối trang:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Xem thêm Static Website là gì?
Sticky
Giá trị static giống như một sự thỏa hiệp giữa các giá trị relative và fixed. Theo văn bản này, nó hiện là một giá trị thử nghiệm, có nghĩa là nó không phải là một phần của thông số kỹ thuật chính thức và chỉ được chấp nhận một phần bởi các trình duyệt được chọn. Nói cách khác, có lẽ không phải là ý tưởng tốt nhất nếu sử dụng điều này trên một trang web sản xuất trực tiếp.
Nó làm gì? Chà, nó cho phép bạn định vị một phần tử so với bất kỳ thứ gì trên tài liệu và sau đó, khi người dùng đã Scroll qua một điểm nhất định trong khung nhìn, hãy cố định position của phần tử vào position đó để nó vẫn được hiển thị liên tục giống như một phần tử có giá trị cố định.
Lấy ví dụ sau:
.element {
position: sticky; top: 50px;
}
Phần tử sẽ được định vị relative cho đến khi position cuộn của khung nhìn đạt đến điểm mà phần tử sẽ cách đỉnh của khung nhìn 50px. Tại thời điểm đó, phần tử trở nên stricky và vẫn ở position cố định 50px trên cùng của màn hình.
Bản trình diễn sau minh họa điểm đó, trong đó điều hướng trên cùng là định vị relative mặc định và điều hướng thứ hai được đặt thành cố định ở trên cùng của chế độ xem. Xin lưu ý rằng bản demo sẽ chỉ hoạt động trong Chrome, Safari và Opera tại thời điểm viết bài này.
