Thuộc tính position trong CSS
Trần Ngọc Thanh - 631
- 15/07/2025
Thuộc tính position trong CSS dùng để quy định cách hiển thị của thẻ HTML khi cuộn chuột và canh vị trí cho thẻ HTML, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính position trong CSS
Thuộc tính position trong CSS dùng để quy định cách hiển thị của thẻ HTML khi cuộn chuột và canh vị trí cho thẻ HTML nằm trên các thẻ HTML khác.
Cú pháp của Thuộc tính position trong CSS
position: giatri;
giatri: Giá trị để quy định cách hiển thị của thẻ HTML khi cuộn chuột và canh vị trí cho thẻ HTML nằm trên các thẻ HTML khác (Ví dụ: relative, absolute, fixed, sticky)
Các thuộc tính thường kết hợp với Thuộc tính position trong CSS:
bottom: Dùng để canh cạnh dưới của một phần tử HTML so với cạnh dưới của phần tử cha hoặc cạnh dưới của trình duyệt (áp dụng trong position: fixed, absolute), dùng để canh cạnh dưới của một phần tử HTML so với vị trí ban đầu của nó (áp dụng trong position: relative).
Ví dụ: bottom: 10px;
top: Dùng để canh cạnh trên của một phần tử HTML so với cạnh trên của phần tử cha hoặc cạnh trên của trình duyệt, tùy vào position khác nhau mà cách canh sẽ khác nhau, thuộc tính top thường áp dụng trong position: fixed, absolute, relative, sticky.
Ví dụ: top: 10px;
left: Dùng để canh cạnh trái của một phần tử HTML so với cạnh trái của phần tử cha hoặc cạnh trái của trình duyệt, tùy vào position khác nhau mà cách canh sẽ khác nhau, thuộc tính left thường áp dụng trong position: fixed, absolute, relative.
Ví dụ: left: 10px;
right: Dùng để canh cạnh phải của một phần tử HTML so với cạnh phải của phần tử cha hoặc cạnh phải của trình duyệt, tùy vào position khác nhau mà cách canh sẽ khác nhau, thuộc tính right thường áp dụng trong position: fixed, absolute.
Ví dụ: right: 10px;
Các giá trị của Thuộc tính position trong CSS
Css position relative
Css position relative dùng để canh vị trí so với thẻ HTML chứa nó, canh khoảng cách bằng relative chỉ dùng được top, left còn right, bottom không dùng được. Ngoài ra position relative còn dùng để các thẻ con thực hiện position absolute.
position: relative;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css position relative</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#kchupo{width:100%;float:left;height:300px;background:red}
p{width:170px; height:auto; background:green; padding:10px; color:#fff; margin:0px }
span {width:100%;float:left; height:auto;margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Css position relative</h1>
<span>Dùng để canh vị trí so với thẻ HTML chứa nó, canh khoảng cách bằng relative chỉ dùng được top, left còn right, bottom không dùng được. Ngoài ra position relative còn dùng để các thẻ con thực hiện position absolute:</span>
<div id="kchupo">
<p style="bottom:-10px;left:10px; position: relative;">bottom:-10px;left:10px;</p>
<p style="top:150px;left:10px; position: relative;">top:10px;left:10px;</p>
</div>
</body>
</html>
Css position absolute
Css position absolute nằm trong một thẻ html position relative, phải nằm trong thẻ html position relative thì mới Css position absolute được, khi position absolute bạn có thể canh top, bottom, left, right so với thẻ HTML chứa nó, đi kèm đó là css z-index:1.
position: absolute;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css position absolute</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#kchupo{width:100%;float:left;height:300px;background:red;}
p{width:170px; height:auto; background:green; z-index:1; padding:10px; color:#fff}
span {width:100%;float:left; height:auto;margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Css position absolute</h1>
<span>Css position absolute nằm trong một thẻ html position relative, phải nằm trong thẻ html position relative thì mới Css position absolute được, khi position absolute bạn có thể canh top, bottom, left, right so với thẻ HTML chứa nó, đi kèm đó là css z-index:1:</span>
<div id="kchupo" style="position: relative;">
<p style="bottom:10px; right:10px; position: absolute;">bottom:10px;right:10px;</p>
<p style="top:10px; right:10px; position: absolute;">top:10px;right:10px;</p>
<p style="top:10px; left:10px; position: absolute;">top:10px;left:10px;</p>
<p style="bottom:10px; left:10px; position: absolute;">bottom:10px;left:10px;</p>
</div>
</body>
</html>
Css position fixed
Css position fixed sẽ cố định thẻ HTML trên màn hình khi cuộn chuột hay không cuộn chuột, khi Css position fixed sẽ canh theo các góc màn hình bao gồm trên, dưới, trái, phải màn hình, đi kèm với css z-index:1111 ở mức cao nhất.
position: fixed;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css position fixed</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div{width:100%;float:left;height:300px;background:red;margin-bottom:10px}
p{width:170px; height:auto; background:green; z-index:1; padding:10px; color:#fff}
span {width:100%;float:left; height:auto;margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Css position fixed</h1>
<span>Css position fixed sẽ cố định thẻ HTML trên màn hình khi cuộn chuột hay không cuộn chuột, khi Css position fixed sẽ canh theo các góc màn hình bao gồm trên, dưới, trái, phải màn hình, đi kèm với css z-index:1111 ở mức cao nhất:</span>
<div></div>
<div></div>
<div></div>
<div></div>
<p style="bottom:10px; right:10px; position: fixed;">bottom:10px;right:10px;</p>
<p style="top:170px; right:10px; position: fixed;">top:170px;right:10px;</p>
<p style="top:170px; left:10px; position: fixed; ">top:170px;left:10px;</p>
<p style="bottom:10px; left:10px; position: fixed;">bottom:10px;left:10px;</p>
</body>
</html>
Css position sticky
Css position sticky thường dùng khi có 2 mục trái phải song song nhau, khi cuộn chuột đọc nội dung thì mục sticky bên cạnh sẽ đứng lại giống fixed, và sau khi đọc xong thì sticky sẽ không đứng nữa và cuộn theo mục bài viết, 2 mục phải nằm trong một thẻ html khác và thẻ HTML đó thường có float:left và width:100%;
position: sticky;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css position sticky</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {width:100%;float:left; height:auto;margin-bottom:10px}
#header{width:100%;float:left;height:100px;background:red;margin-bottom:10px}
#kchinh{width:100%;height:auto;margin-bottom:20px}
#kchinhtr{width:70%;height:2000px;background:green}
#kchinhph{width:29%;float:right;min-height:200px;background:red}
#kfooter{width:100%;float:left;height:auto;min-height:500px;background:red}
</style>
</head>
<body>
<span>Css position sticky thường dùng khi có 2 mục trái phải song song nhau, khi cuộn chuột đọc nội dung thì mục sticky bên cạnh sẽ đứng lại giống fixed, và sau khi đọc xong thì sticky sẽ không đứng nữa và cuộn theo mục bài viết, 2 mục phải nằm trong một thẻ html khác và thẻ HTML đó thường có float:left và width:100%:</span>
<header id="header">
<h1>Chạy thử Css position sticky</h1>
</header>
<section id="kchinh" style="float:left;">
<div id="kchinhtr" style="float:left;">
float:left;
</div>
<div id="kchinhph" style="position: sticky; top: 20px;">
position: sticky; top: 20px;
</div>
</section>
<footer id="kfooter">footer</footer>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính position trong CSS.
- 0 Bình luận
Email, Điện thoại 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 *
