Thuộc tính top trong CSS
Bùi Tấn Lực - 310
- 01/10/2025
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, 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 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>
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 *
