Thuộc tính position trong CSS là một loại thuộc tính của CSS được 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:

Thuộc tính position trong CSS

Thuộc tính position trong CSS là gì?

Thuộc tính position trong CSS là một loại thuộc tính của CSS được 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ác loại 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.

<!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}
#ovuong{width:50px;height:50px;position: relative;top:10px;left:10px;background:green}
</style>
</head>
<body>
<h1>Chạy thử Css position relative</h1>
<div id="kchupo">
  <div id="ovuong"></div>
</div>
</body>
</html>

Chạy thử

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.

<!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;position: relative;}
#ovuong{width:50px;height:50px;position: absolute;bottom:10px;right:10px;background:green;z-index:1}
</style>
</head>
<body>
<h1>Chạy thử Css position absolute</h1>
<div id="kchupo">
  <div id="ovuong"></div>
</div>
</body>
</html>

Chạy Thử

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.

<!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; }
h1{width:100%;float:left;height:auto;margin-top:70px}
#divha{width:100%;float:left;height:auto}
#divha img{width:100%;float:left;height:auto;}
#kchupo{width:100%;float:left;height:70px;background:red;position:fixed;top:0px;left:0px;z-index:1111}
#ovuong{width:50px;height:50px;position: relative;top:10px;left:10px;background:green}
</style>
</head>
<body>
<h1>Chạy thử Css position fixed</h1>
<div id="divha">
 <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="kchupo">
position fixed
</div>
</body>
</html>

Chạy Thử

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%;

<!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;}
#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>Chạy thử Css position fixed</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>

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Ngọc Thanh

Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác

Chia sẻ nội dung đánh giá của bạn về Thuộc tính position trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn