Lập trình CSS - Thuộc tính position

position Định nghĩa các loại phương pháp định vị của phần tử (static, relative, fixed, absolute hoặc sticky).

Thuộc tính position

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

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

  • static
  • relative
  • fixed
  • absolute
  • sticky

Các phần tử thực tế được định vị bằng các thuộc tính top, bottom, left và right. Nhưng, trừ khi trước đó đã thiết lập thuộc tính position, thì các thuộc tính này sẽ không hoạt động. Cách hoạt động của chúng khác nhau dựa trên giá trị position khác nhau.

position: static;

HTML mặc định của phần tử định vị là static (tĩnh).

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

Các phần tử được thiết lập position: static sẽ không được định vị theo cách đặc biệt nào; chúng luôn được định vị dựa trên luồng bình thường của trang:

Điều này <div> được thiết lập position: static;

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

Ví dụ

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

Thử ngay

position: relative;

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

Việc thiết lập các thuộc tính top, right, bottom và left của phần tử định vị tương đối sẽ làm cho chúng偏离其 vị trí bình thường để điều chỉnh. Nó sẽ không điều chỉnh phần còn lại để phù hợp với khoảng trống mà phần tử để lại.

Điều này <div> được thiết lập position: relative;

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

Ví dụ

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

Thử ngay

position: fixed;

position: fixed; Các phần tử được định vị so với khung nhìn, điều này có nghĩa là ngay cả khi cuộn trang, chúng cũng luôn nằm ở cùng vị trí. Các thuộc tính top, right, bottom và left được sử dụng để định vị phần tử này.

Các phần tử định vị cố định sẽ không để trống khoảng trống trong vị trí mà chúng thường nên đặt trong trang.

Vui lòng chú ý đến phần tử cố định ở góc dưới bên phải của trang này. Đây là CSS được sử dụng:

Ví dụ

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

Thử ngay

Điều này <div> được thiết lập position: fixed;

position: absolute;

position: absolute; các phần tử được định vị so với phần tử định vị tổ tiên gần nhất của chúng (không phải định vị so với khung nhìn, như fixed).

Tuy nhiên, nếu phần tử định vị tuyệt đối không có tổ tiên, nó sẽ sử dụng thân tài liệu (body) và di chuyển cùng với trang khi cuộn trang.

Lưu ý:Các phần tử được định vị là vị trí của chúng trừ static các phần tử khác.

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

Điều này <div> được thiết lập position: relative;
Điều này <div> được thiết lập position: absolute;

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

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

Thử ngay

position: sticky;

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

Các phần tử dính dựa trên vị trí cuộn trong khung nhìn (relative) và cố định (fixed) để chuyển đổi. Ban đầu nó sẽ được định vị tương đối, cho đến khi gặp vị trí dịch chuyển được chỉ định trong khung nhìn - sau đó sẽ được 'dán' vào vị trí thích hợp (ví dụ: position:fixed).

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

Trong ví dụ này, khi đạt đến vị trí cuộn của nó, phần tử sticky sẽ dừng lại ở trên cùng của trang (top: 0)

Ví dụ

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

Thử ngay

Các phần tử trùnglapping

Khi định vị phần tử, chúng có thể trùng với các phần tử khác.

z-index Thuộc tính xác định thứ tự chồng chập của phần tử (phần tử nào nên đặt trước hoặc sau phần tử khác).

Phần tử có thể thiết lập thứ tự chồng chập dương hoặc âm:

This is a title

Do z-index của hình ảnh là -1, vì vậy nó nằm sau văn bản.

Ví dụ

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

Thử ngay

Các phần tử có thứ tự chồng chập cao luôn nằm trước các phần tử có thứ tự chồng chập thấp.

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

Định vị văn bản trong hình ảnh

Cách đặt văn bản trên hình ảnh:

Ví dụ

Logo CodeW3C.com
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Thử ngay:

Top Left Top Right Bottom Left Bottom Right Centered

Các ví dụ khác

Đặt hình dạng của phần tử
Ví dụ này minh họa cách đặt hình dạng của phần tử. Phần tử được cắt thành hình dạng này và hiển thị.

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

Thuộc tính Mô tả
bottom Đặt viền cạnh dưới của khung định vị.
clip Cắt bỏ phần tử định vị tuyệt đối.
left Đặt mép bên trái của khung định vị.
position Định nghĩa loại định vị của phần tử.
right Đặt mép bên phải của khung định vị.
top Đặt mép bên trên của khung định vị.
z-index Đặt thứ tự chồng chập của phần tử.

Đọc thêm

Sách bên ngoài:Tóm tắt về định vị CSS

Sách bên ngoài:Định vị tương đối của CSS

Sách bên ngoài:Định vị tuyệt đối của CSS