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, 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 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, left và right.

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.

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, left và right 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.

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, 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.

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:

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.

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 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).

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:

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.

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