Đặc tính position CSS trong bố cục trang

Đặc tính position trong CSS

Đặc tính position trong CSS chỉ dạng của phương thức xác định vị trí được sử dụng cho một
phần tử.
Có 5 giá trị position khác nhau:
+ static
+ relative
+ fixed
+ absolute
+ sticky
Các phần tử sau đó được xác định vị trí sử dụng các đặc tính top, bottom, left và right. Tuy
nhiên, các đặc tính này sẽ không làm việc trừ phi đặc tính position được thiết lập trước. Chúng
cũng làm việc khác nhau dựa trên giá trị position.

position:static

Các phần tử HTML được xác dịnh vị trí static theo mặc định.
Các phần tử được xác định vị trí static không bị ảnh hưởng bởi các đặc tính top, bottom, left
và right. Một phần tử với position:static không xác định vị trí theo một cách đặc biệt nào, nó
luôn được xác định vị trí theo dòng thông thường (normal flow) của bố cục trang khi chưa có
style.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
</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>

Xem kết quả:

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_static

position:relative

Một phần tử với position:relative được xác định vị trí tương đối (có thể thay đổi) với vị trí
thông thường của nó.
Thiết lập các đặc tính top, bottom, right và left của phần tử được xác định vị trí relative
sẽ làm cho nó điều chỉnh khỏi vị trí thông thường của nó. Các nội dung khác sẽ không bị điều
chỉnh để lấp đầy khoảng trống do phần tử để lại.
Ví dụ:

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

Xem kết quả:

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

Chú ý lề trái của phần tử <div> dịch chuyển vào 30 px.

position:fixed

Một phần tử với position:fixed chỉ tương đối với viewport luôn ở một chỗ thậm chí cả khi trang
bị cuộn.
Các đặc tính top, right. bottom và left được sử dụng để định vị phần tử.
Ví dụ:

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

Xem kết quả:

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

Chú ý phần tử <div> có đường biên gắn cố định vào cạnh đáy và cạnh phải của viewport.

position:absolute

Một phần tử với position:absolute được xác định vị trí tương đói (có thể thay đổi) với phần tử
cha có vị trí gần nhất.
Tuy nhiên, nếu một phần tử được xác định vị trí absolute không có phần tử cha, nó sử dụng
document body và di chuyển cùng với cuộn trang.
Chú ý: Phần tử absolute position bị loại khỏi dòng thông thường và có thể đè lên phần tử khác.
Ví dụ:

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

Xem kết quả:

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Chú ý đường biên của phần tử <div> có tên class = “absolute” gắn vào cạnh phải của phần tử
<div> cha của nó, và phần tử này đè lên phần tử cha.

position:sticky

Một phần tử sticky là sự kết hợp giữa relative và fixed, phụ thuộc vào cuộn trang.
Khi chưa cuộn trang nó mang tính chất relative, khi cuộn trang xuống nó đi theo và khi gặp
top của cửa sổ trình duyệt, nó gắn cố định (sticky) vào vị trí đó, mang tính chát position:fixed
IE không hỗ trợ sticky positioning. Sarafi yêu cầu một prefix -webkit (xem ví dụ dưới).

Ví dụ:

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

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

Xem kết quả:

https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

Chú ý, phần tử <div> có tên class=”sticky”. khi cuộn trang xuống nó đi theo và khi gặp top
của cửa sổ trình duyệt, nó gắn cố định (sticky) vào vị trí đó.

Chia sẻ

Đặc tính position CSS trong bố cục trang

Đặc tính position trong CSS

position:static

position:relative

position:fixed

position:absolute

position:sticky

Leave a Reply Cancel reply