Tại sao background position dùng giá trị âm

này có position: absolute;

Ví dụ:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

position: sticky

Một phần tử với position: sticky;được đặt dựa trên vị trí khi người dùng cuộn trang. Phần tử sticky sẽ thay đổi giữa relative và fixed tùy thuộc vào vị trí cuộn. Nó sẽ là relative cho tới khi vị trí tới điểm của khung trình duyệt, khi đó nó sẽ “dính chặt” ở đó (giống position: fixed).

Try to scroll inside this frame to understand how sticky positioning works.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Lưu ý: Internet Explorer không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải xác định tại một trong ít nhất top, right, bottom hoặc left để định vị dính để làm việc.

Trong ví dụ này, phần tử dính sẽ dính vào đầu trang ( top: 0), khi bạn đến vị trí cuộn của nó.

Ví dụ:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Các phần tử chồng lên nhau

Khi các phần tử được đặt vị trí, chúng có thể chồng lên các phần tử khác.

Các thuộc tính z-index xác định thứ tự chồng của một phần tử(phần tử nào nên được đặt ở phía trước, hoặc phía sau, những phần tử khác).

Một phần tử có thể có giá trị thứ tự dương hoặc âm:

Đây là một tiêu đề

Vì hình ảnh có chỉ số z là -1 nên nó sẽ được đặt phía sau văn bản.

Ví dụ:

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Phần tử có giá trị thứ tự lớn hơn luôn đứng trước phần tử có giá trị thứ tự thấp hơn.

Lưu ý:Nếu hai phần tử được đặt vị trí chồng lên nhau mà không z-index được chỉ định, phần tử được đặt vị trí cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.

Tất cả các thuộc tính định vị CSS

Thuộc tính	Miêu tả
bottom	Đặt cạnh lề dưới cùng cho một hộp đã định vị
clip	Cắt một phần tử được định vị tuyệt đối
left	Đặt cạnh lề trái cho một hộp đã định vị
position	Chỉ định kiểu đặt vị trí cho một phần tử
right	Đặt cạnh lề phải cho một hộp đã định vị
top	Đặt cạnh lề trên cùng cho một hộp được định vị
z-index	Đặt giá trị thứ tự của một phần tử