CSS – Position

0
20

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).


Các thuộc tính của position

position quy định các loại phương pháp định vị sử dụng cho một phần tử.

Có năm giá trị vị trí khác nhau:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Tương đương với tĩnh, tương đối, cố định, tuyệt đối hay dính.

Sau đó, các phần tử được định vị bằng cách sử dụng các thuộc tính trên cùng, dưới cùng, trái và phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc position tính được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.

static

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

Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên cùng, dưới cùng, trái và phải.

Một phần tử với position: static;không được định vị theo bất kỳ cách đặc biệt nào; nó luôn được định vị theo dòng bình thường của trang:

Đây là CSS được sử dụng:

Ví dụ:

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

relative

Một phần tử với position: relative;được định vị so với vị trí bình thường của nó.

Đặt các thuộc tính trên cùng, bên phải, dưới cùng và bên trái của một phần tử được định vị tương đối sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng trống nào do phần tử để lại.

Đây là CSS được sử dụng:

Ví dụ:

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

Một phần tử với position: fixed;được định vị so với chế độ xem, có nghĩa là nó luôn ở cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính trên cùng, phải, dưới cùng và bên trái được sử dụng để định vị phần tử.

Một phần tử cố định không để lại khoảng trống trên trang mà nó thường được đặt.

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;
}

absolute

Một phần tử với position: absolute;được định vị tương đối với tổ tiên được định vị gần nhất (thay vì được định vị so với chế độ xem, như cố định).

Tuy nhiên; nếu một phần tử được định vị tuyệt đối không có tổ tiên được định vị, 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 định vị” là phần tử có vị trí là bất kỳ thứ gì ngoại trừ static.

Đây là một ví dụ đơn giản:

Ví dụ:

sticky

Một phần tử với position: sticky;được định vị dựa trên vị trí cuộn của người dùng.

Một phần tử cố định chuyển đổi giữa relativevà fixed, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp vị trí bù nhất định trong khung nhìn – sau đó nó “dính” vào vị trí (như vị trí: fixed).

Lưu ý: Internet Explorer, Edge 15 và các phiên bản trước đó 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 toprightbottomhoặ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;
}

z-index

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

Các z-indexbất động sản xác định thứ tự chồng của một nguyên tố (trong đó yếu tố nên được đặt ở phía trước, hoặc phía sau, những người khác).

Một phần tử có thể có thứ tự ngăn xếp dương hoặc âm.

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

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

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây