Chức vụ - Thủ thuật CSS

Các positionbất động sản có thể giúp bạn thao tác các vị trí của một nguyên tố, ví dụ:

.element ( position: relative; top: 20px; )

Liên quan đến vị trí ban đầu của nó, phần tử ở trên bây giờ sẽ được di chuyển từ trên xuống 20px. Nếu chúng ta tạo hoạt ảnh 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):

relativechỉ là một trong sáu giá trị của thuộc positiontính. Đây là những cái khác:

Giá trị

static: mọi phần tử đều có vị trí tĩnh theo mặc định, vì vậy phần tử sẽ dính vào dòng trang bình thường. Vì vậy, nếu có một bộ chỉ mục left / right / top / bottom / z-index thì sẽ không có tác dụng đối với phần tử đó.
relative: vị trí ban đầu của phần tử vẫn còn trong luồng của tài liệu, giống như staticgiá trị. Nhưng bây giờ left / right / top / bottom / z-index sẽ hoạt động. Các thuộc tính vị trí “di chuyển” phần tử từ vị trí 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 vị trí 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ư 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ác phần tử được định vị cố định 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 cuộn.
sticky(thử nghiệm): phần tử được coi như một relativegiá trị cho đến khi vị trí cuộn của chế độ xem đạt đến một ngưỡng được chỉ định, tại thời điểm đó phần tử sẽ ở fixedvị trí mà nó được yêu cầu gắn vào.
inherit: positiongiá trị không phân tầng, vì vậy điều này có thể được sử dụng để buộc nó cụ thể và inheritđịnh vị giá trị từ cha của nó.

Tuyệt đối

Nếu một phần tử con có một absolutegiá trị thì phần tử mẹ sẽ hoạt động như thể phần tử con 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, bottomvà rightchúng tôi sẽ thấy rằng phần tử con không phản hồi với các thứ nguyên của cha của nó 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ử mẹ:

.parent ( position: relative; )

Bây giờ tính như left, right, bottomvà topsẽ đề cập đến các yếu tố phụ huynh, do đó nếu chúng ta thực hiện các phần tử con trong suốt chúng ta có thể nhìn thấy nó ngồi ngay ở dưới cùng của phụ huynh:

đã sửa

Các fixedgiá trị tương tự như absolutevì nó có thể giúp bạn định vị một yếu tố bất cứ nơi nào liên quan đến các tài liệu, tuy nhiên giá trị này không bị ảnh hưởng bằng cách di chuyể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.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
4	2	7	12	3.1

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	3	số 8

Dính

Các stickygiá trị như một sự thỏa hiệp giữa relativevà fixedgiá trị. 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 đã cuộn qua một điểm nhất định trong khung nhìn, hãy cố định vị trí của phần tử vào vị trí đó để nó vẫn được hiển thị liên tục giống như một phần tử có fixedgiá trị.

Lấy ví dụ sau:

.element ( position: sticky; top: 50px; )

Phần tử sẽ được định vị tương đối cho đến khi vị trí cuộn của khung nhìn đạt đến điểm mà phần tử sẽ 50pxở trên cùng của khung nhìn. Tại thời điểm đó, phần tử trở nên dính và vẫn ở fixedvị trí 50pxtrê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 relativevị mặc định và điều hướng thứ hai được đặt stickyở 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.

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.