Bài 20: Bố cục trong CSS – Thuộc tính position



Thuộc tính position dùng để xác định vị trí cho một phần tử được sử dụng (tĩnh, tương đối, cố định, tuyệt đối, bám dính).

Thuộc tính position

Thuộc tính position dùng để xác định vị trí cho một phần tử trên trang.

Có 5 thuộc tính giá trị khác nhau:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Các phần tử được đặt tại các vị trí bằng cách sử dụng các thuộc tính: top, bottom, leftright. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính position được thiết lập trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị của position.

position: static

Các phần tử HTML được thiết lập mặc định là static.

Các phần tử được đặt vị trí static không bị ảnh hưởng bởi các thuộc tính: top, bottom, leftright.

Phần tử được thiết lập position: static; luôn được đặt vị trí theo các hàng bình thường trên trang.

Phần tử <div> này có position: static;

Ví dụ:


div.static {
  position: static;
  border: 3px solid #73AD21;
}

position: relative

Một phần tử với position: relative; được định vị theo vị trí bình thường của nó.
Đặt các thuộc tính top, bottom, leftright cho một phần tử theo vị trí tương đối sẽ làm nó dịch chuyển khỏi vị trí bình thường của nó.
Các phần nội dung khác sẽ không điều chỉnh để lấp đầy khoảng không gian bên trái.

Phần tử <div> này có position: relative;

Ví dụ:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position: fixed

Một phần tử với position: fixed; được đặt ở vị trí tương đối theo viewport (cửa sổ của trình duyêt), có nghĩa là phần tử đó luôn nằm cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính top, bottom, leftright được sử dụng để đặt vị trí phần tử.

Một phần tử fixed không để lại khoảng trống trên trang.

Phần tử <div> này có position: fixed;

Ví dụ bên dưới, phần tử cố định ở góc dưới bên phải của trang. Đây là CSS được sử dụng:

Ví dụ:


div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

position: absolute

Một phần tử với position: absolute; được đặt ở vị trí tương đối với phần tử cha đầu tiên gần nhất (thay vì như được định vị so với viewport – khung trình duyệt).

Tuy nhiên; nếu một phần tử được đặt vị trí tuyệt đối mà không có phần tử cha, nó sẽ sử dụng body làm phần tử cha và nó sẽ di chuyển khi thực hiện cuộn trang.

Lưu ý: Phần tử “được đặt vị trí” là phần tử có vị trí là bất kỳ thứ gì ngoại trừ static.

Phần tử <div> này có position: relative;

Phần tử <div> 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; sẽ được cuộn theo vị trí của thanh cuộn. Phần tử sticky sẽ thay đổi giữa relativefixed 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ử

Có thể bạn sẽ thích…

Trả lời