🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về thuộc tính position(vị trí) của layout trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Thuộc tính position chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, cố định, tuyệt đối hoặc cố định).

1. Position trong CSS

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

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

  • static
  • relative
  • fixed
  • absolute
  • sticky

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 tính vị trí được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.

2. position: 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ử có 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 kiểu bình thường của trang:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is 
always positioned according to the normal flow of the page:</p>

<div class="static">
  This div element has position: static;
</div>

</body>
</html>

3. position: relative;

Một phần tử 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.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

4. position: fixed;

Một phần tử có position: fixed; được đặt so với chế độ viewport, 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:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

5. position: absolute;

Một phần tử có position: absolute; được định vị so với tổ tiên được định vị gần nhất (thay vì được định vị so với khung nhìn, 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ử “positioned” là phần tử có vị trí là bất kỳ thứ gì ngoại trừ static.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

6. position: sticky;

Một phần tử có 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 relative và 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 chỉ định ít nhất một trong các vị trí top, right, bottom or left để định vị cố định hoạt động.

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

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>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.</p>
  <p>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.</p>
</div>

</body>
</html>

7. Phần tử chồng chéo – Overlapping Elements

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

Thuộc tính z-index chỉ định thứ tự ngăn xếp 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 các phần tử khác).

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="cafedev.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

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ị trùng nhau mà không chỉ định z-index, phần tử được định vị cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM