Trang chủ » HTML và CSS » CSS » Tìm hiểu thuộc tính Position css là gì?

Tìm hiểu thuộc tính Position css là gì?

Position trong css được sử dụng rất nhiều trong quá trình các bạn làm front-end – Thuộc tính gần như không thể thiếu. Hãy cùng mình tìm hiểu về Position css là gì nhé!!!

Position trong CSS

Position là thuộc tính chỉ định vị trí phần tử trong css. Có 5 vị trí position: static, relative, fixed, absolute hoặc sticky.

Sau khi sử dụng position để xác định vị trí của phần tử, tiếp đó là dùng các thuộc tính top, bottom, left, right.

  1. top: Khoảng cách bên trên của phần từ với phần tử cha
  2. bottom: Khoảng cách bên dưới của phần từ với phần tử cha
  3. left: Khoảng cách bên trái của phần từ với phần tử cha
  4. right: Khoảng cách bên phải của phần từ với phần tử cha

Position static trong CSS

Static là thuộc tính mặc định của phần tử, các phần tử không bị ảnh hưởng bởi các thuộc tính: top, bottom, left, right. Phần tử sử dụng static hiện thị như một phần tử bình thường như các phần tử cùng loại khác.

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<p>Phần tử sử dụng position static:</p>
<div class="static">
  Hiển thị kết quả phần tử sử dụng position: static;
</div>
</body>
</html>

Kết quả hiển thị static

Phần tử sử dụng position static:

Hiển thị kết quả phần tử sử dụng position: static;

Position relative trong CSS

Phần tử khi sử dụng position:relative có thể sử dụng các thuộc tính: top, bottom, left, right để định vị trí

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<p>Phần tử sử dụng position relative:</p>
<div class="relative">
  Hiển thị kết quả phần tử sử dụng position: relative;
</div>
</body>
</html>

Kết quả hiển thị relative

Phần tử sử dụng position relative:

Hiển thị kết quả phần tử sử dụng position: relative;

Position fixed trong CSS

Phần tử khi sử dụng thuộc tính position: fixed thì vị trí phần tử luôn được xuất hiện tại 1 vị trí dù có cuộn chuột xuống và lên. Phần tử không tạo nên khoảng trống trên trang. Phần tử sử dụng position:fixed vẫn có thể sử dụng các thuộc tính: top, bottom, left, right.

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<p>Phần tử sử dụng position fixed:</p>
<div class="fixed">
  Hiển thị kết quả phần tử sử dụng position: fixed;
</div>
</body>
</html>

Kết quả hiển thị fixed

Phần tử sử dụng position fixed:

***Xem vị trí góc trái bên dưới màn hình

Hiển thị kết quả phần tử sử dụng position: fixed;

Position absolute trong CSS

Position absolute trong css
Position absolute trong css

Phần tử sử dụng thuộc tính position:absolute được xác định vị trí so với phần tử cha gần nhất thay vì khung hình như cố định. Thường được sử dụng với relative, relative làm phần tử cha.

<!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>
<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>

Kết quả hiển thị absolute

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

This div element has position: relative;

This div element has position: absolute;

Position sticky trong CSS

Phần tử sử dụng position:sticky được định vị dựa trên ví dụ cuộn chuột của người dùng. Một phần tử cố định chuyển đổi giữa relative và fixed. Ban đầu được định vị, vị trí như phần tử bình thường (relative), sau khi cuộn chuột qua phần tử, phần tử chuyển thành vị trí cố định (fixed). Bạn có thể xem ví dụ dưới đây:

<!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>
<div style="height: 400px; overflow: auto;">
<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" style="position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50;">I am sticky!</div>
<div>
<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 style="padding-bottom: 2000px;">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>
<div>
</body>
</html>

Kết quả hiển thị sticky

Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

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.

 

Thuộc tính nâng cao 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. 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). Một phần tử có thể có thứ tự ngăn xếp dương hoặc âm:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>
<img src="https://theanh.tech/public/media/thumb/logo-192x192.png" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

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 *