Tất tần tật về thuộc tính position trong CSS

byHiju Blog -
0

Hiểu về thuộc tính position trong CSS – Khi bạn thiết kế các layout cho
website việc chuyển từ file thiết kế theo định dạng HTML (Hypertext Markdown
Language) bạn sẽ buộc phải sử dụng thuộc tính position trong CSS. Ví dụ như
làm thanh tính năng trên menu, header, v.v. Có thể hiểu nó là thuộc tính xác
định loại của phương pháp định vị trí cho thành phần.





href="https://blogger.googleusercontent.com/img/a/AVvXsEhR3zn0zdcC605jDMxuuFOh46XoDpoHN-FIBWU04qUG4EVDnyLmT3Gwmy2RHQLJZBQMC5HY8mRTM5SRCiM8O2JOj-bXw5pCL51wD8Iv4-XTp3Z3saMJ87Kxh8uKM31sK0OnrQzgbDaBIBC49stLUtArZoNTwMA8DKa7BjGxmjmZQ7I__I8M_QnCgPQSgjE"
style="margin-left: 1em; margin-right: 1em;"
> alt="position trong css"
data-original-height="398"
data-original-width="1200"
height="212"
src="https://blogger.googleusercontent.com/img/a/AVvXsEhR3zn0zdcC605jDMxuuFOh46XoDpoHN-FIBWU04qUG4EVDnyLmT3Gwmy2RHQLJZBQMC5HY8mRTM5SRCiM8O2JOj-bXw5pCL51wD8Iv4-XTp3Z3saMJ87Kxh8uKM31sK0OnrQzgbDaBIBC49stLUtArZoNTwMA8DKa7BjGxmjmZQ7I__I8M_QnCgPQSgjE=w640-h212"
title="position trong css"
width="640"
/>





Với thuộc tính position chúng ta có 5 giá trị chính cần biết:



Static: Đây được xem là giá trị hiển thị Position trong css một cách
mặc định (default), các thành phần sẽ nằm theo thứ tự của văn bản. 




Relative: Định vị trí tuyệt đối cho các thành phần, không gây ảnh hưởng
tới vị trí ban đầu hay các thành phần khác.




Absolute: Giá trị này sẽ giúp định vị trí tuyệt đối cho thành phần theo
thành phần bao ngoài, hoặc ít nhất là theo cửa sổ trình duyệt. Fixed: Định vị
trí tương đối cho thành phần theo cửa sổ trình duyệt.




Fixed: Định vị và giúp cho phần tử luôn cố định một chỗ, ví dụ như khi
bạn scroll trình duyệt chẳng hạn, phần tử sẽ không thay đổi.




Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần
bao ngoài).




Trước hết hãy nói về thuộc tính position relative, absolute và các thuộc tính
cool ngầu khác


Thuộc tính Position Relative



Thuộc tính position: relative trong CSS giúp Định vị trí tuyệt đối cho
các thành phần. Ví dụ:



selector{position: relative;}




Nếu bạn sử dụng thuộc tính này thì sẽ phải sử dụng kèm theo với các thuộc tính
căn chỉnh tọa độ của thành phần (lưu ý: các giá trị của các thẻ này là chính
là đơn vị đo như px). Top: là cách trên, Bottom: là cách dưới,
Left: là cách trái, Right: là cách phải. Hãy cùng nhìn qua đoạn
code ví dụ sau đây:




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thuộc tính position trong CSS</title>
</head>
<style type="text/css" media="screen">
div {
padding: 40px;
margin: 20px;
width: 320px;
border: 2px solid red;
}
</style>
<body>
<div>Hiju Blog.</div>
<div class="relative">Hiju Blog.</div>
<div>Hiju Blog.</div>
</body>
</html>






Mọi người có thể test thử và thấy rằng các thẻ hiển thị đúng thứ tự, giờ ta có
thể thêm đoạn CSS vào class relative như sau:




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>.relative {position: relative;
/Cach ben trai 260px/
left: 260px;
/Cach ben tren 290px/
top: 290px;
background-color: #e1ab22;
}






Lưu ý, khi bạn bù một vị trí phần tử với position: relative, không gian nó
chiếm không di chuyển, vị trí hiện tại của nó sẽ khiến đổi bố cục xung quanh
vị trí đó không thay đổi…Tưởng tượng như thế này, position: relative giống như
nhân vật có khả năng di chuyển tự do, nhưng luôn luôn liên quan đến nơi ban
đầu.





href="https://blogger.googleusercontent.com/img/a/AVvXsEiYSNNFxk2SEI9ehKcAVxgcC2IpVoFF2rsOd3zrOw11rxpRyWwXQvIyaO-jP0B4nonzcoab7iqtlUevV0hRLM-naKeP4QQZCEYDURQOrOoLiHOLx1tbv-BqHL9wv9ocxCJIOzoDIR5PYx1lHtJVTT8mZZp2jSM9CVAdtYAle5ARmlHlDyp5ZemSRhoel3U"
style="margin-left: 1em; margin-right: 1em;"
> alt="position trong css"
data-original-height="396"
data-original-width="1448"
height="176"
src="https://blogger.googleusercontent.com/img/a/AVvXsEiYSNNFxk2SEI9ehKcAVxgcC2IpVoFF2rsOd3zrOw11rxpRyWwXQvIyaO-jP0B4nonzcoab7iqtlUevV0hRLM-naKeP4QQZCEYDURQOrOoLiHOLx1tbv-BqHL9wv9ocxCJIOzoDIR5PYx1lHtJVTT8mZZp2jSM9CVAdtYAle5ARmlHlDyp5ZemSRhoel3U=w640-h176"
title="position trong css"
width="640"
/>




Thuộc tính Position Absolute



Như đã nói ở trên thuộc tính position: absolute trong CSS có tác dụng
giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít
nhất là theo cửa sổ trình duyệt. Cụ thể hơn, thuộc tính absolute xác định định
tọa độ của thành phần theo một thẻ cha relative (nếu có), Nếu không có thẻ cha
thì nó sẽ đi theo body của toàn trang web. Cách sử dụng cũng tương tự như
relative.




Dưới đây là ví dụ tương tự như bên trên thay vào đó là thẻ absolute.
Các bạn sẽ thấy rõ rằng khi chúng ta di chuyển các thành phần bằng absolute
thì các thẻ tiếp theo sẽ được đưa lên vị trí mặc định. Bạn có thể thử ngay
nhé.




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>.absolute {
position: absolute;
/Cach ben trai 260px/
left: 260px;
/Cach ben tren 290px/
top: 290px;
background-color: #e1ab22;
}





Thuộc tính Position Static



Thuộc tính position: static được xem là giá trị mặc định (default) của
position. Đây là các giá trị mà dù bạn có khai báo chúng hay không khai báo
thì các phần tử (element) sẽ tự được sắp xếp vị trí một cách như bình thường
trên trang web. Bạn có thể nhìn vào ví dụ sau:




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><body>

<div class="box-red"></div>

<div class="box-green"></div>

</body>





Bạn có thể thử thêm position static như sau:




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>// Day la khi ban khong khai bao position
.box-orange {

background: Green;
height: 250px;
width: 250px;
}

//*Sau khi ban da khai bao static
.box-blue {
background: grey;
height: 250px;
width: 250px;
position: static;
}





Thuộc tính Position Fixed



Thuộc tính thường được các lập trình viên dùng để định vị một thành phần so
với window hiển thị của các trình duyệt. Bạn có thể thấy ví dụ này, khi vào
một website nào đó và bạn thử scroll browser, bạn sẽ thấy menu hay button cứ
đứng yên một chỗ không thay đổi thì đó chính là position fixed. Giá trị này
hoàn toàn không phụ thuộc vào phần tử cha, khi nào scroll trình duyệt là nó
hoạt động thôi. Bạn có thể thử tham khảo ví dụ sau đây:




style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>.header {
margin-top: 0px;
text-align: center;
position: fixed;
top: 0px;
width: 100%;
background: #e1ab22;
}





Thuộc tính Position Sticky



Đây là một thuộc tính khá tương đồng với fixed, bạn có thể xem nó như một sự
kết hợp “lưỡng long nhất thể” của relative và fixed. Vì có sự lai tạo này nên
nó cũng không được hỗ trợ quá nhiều trong cộng đồng làm web. Nó cũng không sử
dụng được trên trình duyệt Internet Explorer cũng như một số phiên bản đầu của
Edge nên sẽ dễ gây lỗi. Không khuyến khích các lập trình viên sử dụng





href="https://blogger.googleusercontent.com/img/a/AVvXsEjuDQONRBM4Wh2BtYxKm8fEF6hk1OrJtKpYw7Yl9iv4xPSOwQrr2VeY6Bt3cJUoKfwiZXAn1U6BCUkCHucQbvDNCTYWKy33Dth93hylwQIAT2h6tk1QDt2zj2ZSLqcK0rFqIG2HG0mY8vnzFYFVu8TdQhs4mxeb5HUTGKMqjqGjQfknQC_cTGIsaTndL7s"
style="margin-left: 1em; margin-right: 1em;"
> alt="position-trong-css-sticky"
data-original-height="624"
data-original-width="1597"
height="250"
src="https://blogger.googleusercontent.com/img/a/AVvXsEjuDQONRBM4Wh2BtYxKm8fEF6hk1OrJtKpYw7Yl9iv4xPSOwQrr2VeY6Bt3cJUoKfwiZXAn1U6BCUkCHucQbvDNCTYWKy33Dth93hylwQIAT2h6tk1QDt2zj2ZSLqcK0rFqIG2HG0mY8vnzFYFVu8TdQhs4mxeb5HUTGKMqjqGjQfknQC_cTGIsaTndL7s=w640-h250"
title="position-trong-css-sticky"
width="640"
/>



Lời kết



Có thể nói, thuộc tính position trong CSS là một trong những kiến
thức cực kỳ quan trọng cần được nắm vững. Các thuộc tính này được sử dụng
rất nhiều trong việc làm website hiện nay đặc biệt là khi bạn thực hiện việc
cắt layout cũng như làm các thành phần như menu. Bạn nên tìm hiểu thêm một
số bài tập về position để sử dụng tính năng này thuần thục hơn nữa.




Các bài viết liên quan:





  • href="https://www.hijublog.com/2023/07/10-tips-tailwindcss.html"
    target="_blank"
    >10 Tips Tailwind CSS Mà Bạn Cần Biết Để Tăng Năng Suất Làm Việc     >


  • href="https://www.hijublog.com/2023/07/tu-khoa-var-let-const-trong-javascript.html"
    target="_blank"
    >Từ khóa "let", "const" và "var" trong JavaScript ES6     >


  • href="https://www.hijublog.com/2023/07/javascript-template-literals.html"
    target="_blank"
    >JavaScript Template Literals: Cách sử dụng Template Strings để làm
    việc hiệu quả với chuỗi trong JavaScript     >



Tags

Post a Comment

Previous Post Next Post