Thuộc tính top trong CSS
Bùi Tấn Lực - 949
- 01/10/2025
Chức năng của Thuộc tính top trong CSS
Thuộc tính top trong CSS 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.
Cú pháp của Thuộc tính top trong CSS
top: giatri;
giatri: Giá trị dùng để canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha hoặc so với cạnh trên của trình duyệt (Ví dụ: 10px, 50%)
Ví dụ: top:10px; hoặc top:50%;
Code Thuộc tính top trong CSS
Thuộc tính top khi dùng position fixed trong CSS
Thuộc tính top trong position fixed sẽ canh cạnh trên của phần tử HTML so với cạnh trên của trình duyệt:
top:10px; position:fixed;
top:50%; position:fixed;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính top khi dùng position fixed trong CSS</title>
<style>
div {width:100%; height:300px; float:left; background:red; margin-bottom:15px}
span{width:70px; height:30px; background:green; right:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính top khi dùng position fixed trong CSS</h1>
<p>Thuộc tính top trong position fixed sẽ canh cạnh trên của phần tử HTML so với cạnh trên của trình duyệt:</p>
<div></div>
<div></div>
<div></div>
<span style="top:10px; position:fixed;">top:10px;</span>
<span style="top:50%; position:fixed;">top:50%;</span>
</body>
</html>
Thuộc tính top khi dùng position absolute trong CSS
Thuộc tính top trong position absolute sẽ canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha có position relative gần nhất:
top:10px; position:absolute;
top:50%; position:absolute;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính top khi dùng position absolute trong CSS</title>
<style>
#d-relative{width:100%; height:300px; background:red; }
span{width:100px; height:30px; background:green; right:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính top khi dùng position absolute trong CSS</h1>
<p>Thuộc tính top trong position absolute sẽ canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha có position relative gần nhất:</p>
<div id="d-relative" style="position:relative">
<span style="top:10px; position:absolute;">top:10px;</span>
<span style="top:50%; position:absolute;">top:50%;</span>
</div>
</body>
</html>
Thuộc tính top khi dùng position relative trong CSS
Thuộc tính top trong position relative sẽ canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha:
top: 0px; position:relative;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính top khi dùng position relative trong CSS</title>
<style>
#divtong{width:100%; height:300px; background:red;}
#divtong p{width:100px; height:30px; background:green; left:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính top khi dùng position relative trong CSS</h1>
<p>Thuộc tính top trong position relative sẽ canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha:</p>
<div id="divtong">
<p style="top: 0px; position:relative;">top: 0px;</p>
</div>
</body>
</html>
Thuộc tính top khi dùng position sticky trong CSS
Thuộc tính top trong position sticky sẽ canh cạnh trên của phần tử HTML so với cạnh trên của phần tử cha:
position: sticky; top: 20px;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính top khi dùng position sticky trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#header{width:100%;float:left;height:100px;background:red;margin-bottom:10px}
#kchinh{width:100%;float:left;height:auto;margin-bottom:20px}
#kchinhtr{width:70%;float:left;height:auto}
#kchinhtr img{width:100%;float:left;height:auto}
#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>
<header id="header">
<h1>Thuộc tính top khi dùng position sticky trong CSS</h1>
</header>
<section id="kchinh">
<div id="kchinhtr">
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg">
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg">
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg">
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg">
<img src="https://webmoi.vn/media/images/background-image-full-man-hinh.jpg">
</div>
<div id="kchinhph" style="position: sticky; top: 20px;">
position sticky
</div>
</section>
<footer id="kfooter">footer</footer>
</body>
</html>
Những lỗi thường gặp khi sử dụng thuộc tính top trong CSS
Thuộc tính top khá đơn giản nhưng dễ gây nhầm lẫn khi áp dụng vào bố cục thực tế. Phần lớn vấn đề xuất hiện do cách định vị phần tử chưa phù hợp hoặc sử dụng top thay cho một thuộc tính có mục đích khác.
Sử dụng top khi phần tử chưa có position
top chỉ phát huy tác dụng khi phần tử được định vị bằng position phù hợp. Nếu phần tử vẫn sử dụng position: static mặc định, việc khai báo top thường không tạo ra thay đổi về vị trí.
Khi cần dịch chuyển phần tử theo vị trí của nó hoặc theo phần tử cha, nên xác định rõ kiểu định vị trước khi sử dụng top.
.box {
position: relative;
top: 20px;
}
Trong ví dụ trên, phần tử được dịch xuống 20px so với vị trí ban đầu nhờ position: relative. Đây là điểm quan trọng cần kiểm tra đầu tiên khi thấy top không hoạt động.
Nhầm giữa top và margin-top
top và margin-top đều có thể làm phần tử trông như được đẩy xuống dưới, nhưng cơ chế hoạt động hoàn toàn khác nhau. margin-top tác động đến khoảng cách trong bố cục, còn top điều chỉnh vị trí của phần tử đã được định vị.
Vì vậy, nếu mục tiêu là tạo khoảng cách giữa các phần tử, margin-top thường phù hợp hơn. Nếu cần điều chỉnh vị trí của một phần tử đang sử dụng cơ chế định vị, top sẽ có ý nghĩa rõ ràng hơn.
Dùng top nhưng phần tử không di chuyển như mong muốn
Một trường hợp phổ biến là phần tử có position nhưng lại được đặt trong một bố cục phức tạp, khiến kết quả của top khác với dự đoán. Điều này thường liên quan đến phần tử cha, kích thước vùng chứa hoặc kiểu định vị đang sử dụng.
Thay vì tăng giảm giá trị top liên tục, nên kiểm tra lần lượt position của phần tử, phần tử chứa nó và các thuộc tính định vị liên quan. Cách này giúp tìm đúng nguyên nhân thay vì chỉ điều chỉnh giao diện theo cảm tính.
Lạm dụng top để căn chỉnh giao diện
top phù hợp với những trường hợp cần định vị phần tử cụ thể, nhưng không nên dùng nó để xử lý mọi vấn đề về khoảng cách và căn chỉnh. Việc đặt quá nhiều giá trị top khác nhau có thể khiến bố cục khó kiểm soát, đặc biệt khi giao diện thay đổi kích thước màn hình.
Nên ưu tiên các cơ chế bố cục như flexbox hoặc grid khi cần sắp xếp các thành phần trong một khu vực. Chỉ sử dụng top khi việc điều chỉnh vị trí thực sự phù hợp với mục đích của phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính top 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 *
