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ử được sử dụng.

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

  • static
  • relative
  • fixed
  • absolute
  • sticky

Các phần tử sau đó được đặt vị trí bằng cách sử dụng các thuộc tính: top, bottom, left, và right. 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 đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị position.

position: static

Các phần tử HTML mặc định được đặt vị trí tĩnh.

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

Một phần tử với position: static; không thể đặt vị trí theo bất kỳ cách nào khác; nó luôn được đặt vị trí theo dòng bình thường của 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 đặt vị trí so với vị trí bình thường của nó. Đặt các thuộc tính top, bottom, left, và right của một phần tử có vị trí tương đối sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường của nó.

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í so với khung 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, left, và right đượ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 mà nó thường được nằm.

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

Lưu ý 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 được đặt vị trí gần nhất (thay vì được đặt vị trí so với khung trình duyệt, như cố định).

Tuy nhiên; nếu một phần tử được đặt vị trí tuyệt đối không có phần tử cha đầu tiên được đặt vị trí, nó sẽ sử dụng phần thân tài liệu và di chuyển cùng với việc 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;đượ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 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

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

EnglishVietnamese