Thuộc tính position trong CSS
Trần Thị Vân - 1223
- 15/07/2025
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 thường gặp khi sử dụng thuộc tính position trong CSS
Thuộc tính position giúp kiểm soát cách một phần tử được định vị trên trang, nhưng cũng dễ gây ra lỗi nếu chưa hiểu rõ mối quan hệ giữa phần tử con, phần tử cha và vùng chứa. Một số lỗi dưới đây xuất hiện khá thường xuyên khi xây dựng giao diện thực tế.
Dùng position absolute nhưng phần tử cha không có position relative
Khi sử dụng position: absolute, phần tử thường được định vị dựa trên phần tử tổ tiên gần nhất có thiết lập vị trí khác static. Nếu phần tử cha không tạo được mốc định vị, phần tử con có thể bị đặt theo một vùng chứa khác, khiến vị trí hiển thị lệch khỏi mong muốn.
Một cách tổ chức phổ biến là đặt position: relative cho phần tử cha và position: absolute cho phần tử cần đặt vào một vị trí cụ thể. Chẳng hạn, một nhãn nằm ở góc của hộp sản phẩm có thể được kiểm soát dễ dàng theo cách này:
.san-pham {
position: relative;
}
.nhan {
position: absolute;
top: 10px;
right: 10px;
}
Điểm quan trọng là relative ở đây không nhất thiết nhằm di chuyển phần tử cha. Nó chủ yếu tạo ra một mốc để phần tử absolute bên trong xác định vị trí.
Nhầm giữa position fixed và position sticky
fixed và sticky đều có thể được sử dụng cho những thành phần cần duy trì vị trí khi người dùng cuộn trang, nhưng cách hoạt động không giống nhau.
Với fixed, phần tử được cố định theo vùng hiển thị của trình duyệt và không còn giữ vị trí thông thường trong bố cục. Trong khi đó, sticky vẫn tham gia vào bố cục và chỉ chuyển sang trạng thái bám khi đạt đến ngưỡng được thiết lập.
Vì vậy, nếu muốn tạo thanh công cụ luôn nằm cố định trên màn hình, fixed thường phù hợp hơn. Nếu muốn tiêu đề của một khu vực bám lại trong quá trình cuộn nhưng vẫn thuộc cấu trúc nội dung ban đầu, sticky thường là lựa chọn hợp lý.
Phần tử position bị che do z-index không phù hợp
Đôi khi phần tử đã được đặt đúng vị trí nhưng lại bị một thành phần khác che lên. Nguyên nhân thường liên quan đến z-index và thứ tự xếp chồng của các phần tử.
Không nên chỉ tăng z-index lên một con số thật lớn để xử lý nhanh. Nếu các phần tử nằm trong những stacking context khác nhau, một giá trị lớn vẫn có thể không đưa phần tử ra phía trước như mong muốn.
Cách xử lý tốt hơn là kiểm tra phần tử nào đang tạo vùng xếp chồng, sau đó thiết lập position và z-index ở đúng cấp độ cần thiết. Ví dụ:
.menu {
position: relative;
z-index: 10;
}
.noi-dung {
position: relative;
z-index: 1;
}
Cách này giúp xác định rõ thành phần nào cần nằm trên thành phần nào, thay vì phụ thuộc vào những giá trị z-index quá lớn và khó quản lý.
Position làm thay đổi vị trí hiển thị trên thiết bị di động
Một thiết kế sử dụng position có thể hiển thị tốt trên màn hình lớn nhưng bị lệch, che nội dung hoặc khó thao tác trên điện thoại. Điều này thường xảy ra khi vị trí được đặt bằng các giá trị cố định nhưng kích thước và không gian hiển thị trên thiết bị nhỏ hơn.
Khi sử dụng absolute, fixed hoặc sticky, nên kiểm tra lại giao diện ở nhiều kích thước màn hình. Đặc biệt với các thành phần nằm sát mép màn hình, cần tránh đặt khoảng cách quá cứng khiến nội dung bị tràn hoặc che khuất.
Trong trường hợp bố cục có thể thay đổi đáng kể trên điện thoại, có thể điều chỉnh lại vị trí bằng media query thay vì cố giữ nguyên thông số của giao diện desktop. Mục tiêu là để position hỗ trợ bố cục chứ không trở thành nguyên nhân khiến giao diện mất tính linh hoạt.
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 *
