thuộc tính position có 5 gía trị, thể hiện kiểu loại vị trí
staticrelativefixedabsolutesticky
top: => liên quan đến khoảng cách từ top đến vị trí của element
left: => liên quan đến khoảng cách từ left đến vị trí của element
right: => liên quan đến khoảng cách từ right đến vị trí của element
bottom: => liên quan đến khoảng cách từ bottom đến vị trí của element
position: static;
là mặc định của các element (có nghĩa là vị trí của nó là vị trí tự nhiên trong html code)vì thế mà nếu set position:static thì 4 thuộc tính top left right bottom sẽ không có tác dụng gì cả
position: relative;
vị trí element được xác định so với vị trí mặc định của chính element đókhi đó: giả sử khoảng cách default từ element đến top,left,right,bottom của webpage là T, L, R, B
top:X => khoảng cách từ element đến top là T+X (tăng thêm 1 lượng X nếu X>0, giảm 1 lượng X nếu X<0)
<!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>
position: fixed;
vị trí của element được xác định so với viewport(cửa sổ trình duyệt)=> vị trí element không thay đổi khi ta scroll
top:X => khoảng cách từ element đến top của viewport(gần thanh html url của trình duyệt) là X
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
left: 50%;
top: -6px;
width: 300px;
border: 3px solid #73AD21;
}
body{
width:3000px;
height:5000px;
}
</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>position: absolute;
vị trí của element được xác định so với "tổ tiên gần nhât" mà là "positioned element"positioned element: là các element mà thuộc tính position không phải là static (tức là position thuộc 1 trong 4 giá trị relative fixed absolute và sticky)
=> nếu tất cả các element tổ tiên của nó đều là static position(position mặc định) thì :
vị trí của element được xác định so với webpage (vị trí element sẽ thay đổi khi ta scroll)
<!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>
position: sticky;
vị trí của element loại sticky có 2 trạng thái:relative and fixed1. relative: vị trí element được xác định so với vị trí mặc định của chính element đó
2. fixed: vị trí của element được xác định so với viewport(cửa sổ trình duyệt)
điều kiện chuyển từ trạng thái relative sang fixed: khi vị trí của element so với viewport chạm đến 1 trong 4 thuộc tính top, left, right, bottom
Ví du: positionsticky
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;/*For Safari*/
position: sticky;
top: 0;
left:50px;
bottom:0;
right:0;
padding: 5px;
width:100px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
#div1{
width:3000px;
height:5000px;
background-color:blue;
}
#div2{
width:3000px;
height:5000px;
background-color:green;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="sticky">I am sticky!</div>
<div id="div2"></div>
</body>
</html>
No comments:
Post a Comment