Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS. Đây là một thuộc tính hay sử dụng và có một ví dụ dễ nhìn thấy nhất đó là menu của kiso.vn khi kéo xuống thì nó sẽ đứng im ngay vị trí trên cùng của trình duyêt chứ không bị đẩy lên trên, đó chính là tác dụng của thuộc tính position:fixed.
1. Position Fixed trong CSS
Tương tự như thuộc tính Absolute, Fixed cũng hoạt động dựa vào một thẻ cha làm chuẩn bên ngoài. Chỉ có khác một điều là đối với Fixed thì khi bạn scrolling thì nó sẽ nằm luôn trên màn hình ngay tại vị trí chuẩn đó và đè lên trên các phần tử bên dưới.
Theo mặc định thì Fixed sẽ lấy luôn cửa sổ trình duyệt làm nơi để làm chuẩn. Nhưng nếu các thẻ cha của nó có khai báo position: relative thì nó sẽ lấy thẻ cha đó chứ không lấy của sổ trình duyệt nữa. Tuy nhiên nếu bạn khai báo một trong bốn thuộc tính sau: top – left- bottom – right thì lúc này nó sẽ không lấy thẻ cha đó nữa mà nó sẽ lấy cửa sổ trình duyệt làm chuẩn.
Ví dụ 1: XEM DEMO
Bài viết này được đăng tại [kiso.vn]
Câu chào sẽ được treo phía trên cùng của trình duyệt.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
height: 2000px;
background: blue;
}
.fixed{
height: 30px;
line-height: 30px;
background: red;
color: #fff;
position: fixed;
width: 100%;
top: 0px;
}
.bottom{
height: 400px;
margin-top: 600px;
background: yellow;
}
</style>
</head>
<body>
<div class="fixed">
Chào mừng bạn đến với kiso.vn
</div>
<div class="bottom">
</div>
</body>
</html>
Ví dụ 2: XEM DEMO
Thẻ HTML Fixed không có khai báo một trong bốn thuộc tính top – left- bottom – right nên nó sẽ tìm thẻ cha có position:relative làm chuẩn.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
height: 2000px;
background: blue;
}
.relative{
margin-top: 200px;
position: relative;
height: 100px;
}
.fixed{
height: 30px;
line-height: 30px;
background: red;
color: #fff;
position: fixed;
width: 100%;
}
.bottom{
height: 400px;
margin-top: 600px;
background: yellow;
}
</style>
</head>
<body>
<div class="relative">
<div class="fixed">
Chào mừng bạn đến với kiso.vn
</div>
</div>
<div class="bottom">
</div>
</body>
</html>Ví dụ 3: XEM DEMO
Thẻ HTML Fixed có khai báo thuộc tính top:0px nên nó sẽ lấy cửa sổ trình duyệt làm chuẩn.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
height: 2000px;
background: blue;
}
.relative{
margin-top: 200px;
position: relative;
height: 100px;
}
.fixed{
height: 30px;
line-height: 30px;
background: red;
color: #fff;
position: fixed;
width: 100%;
top: 0px;
}
.bottom{
height: 400px;
margin-top: 600px;
background: yellow;
}
</style>
</head>
<body>
<div class="relative">
<div class="fixed">
Chào mừng bạn đến với kiso.vn
</div>
</div>
<div class="bottom">
</div>
</body>
</html>Qua ba ví dụ này đã nói lên những tính chất mà bạn cần lưu ý khi sử dụng thuộc tính Fixed này.
2. Lời kết
Nếu bạn để ý kỹ thì bên sidebar mình có thiết lập position:fixed cho phần quảng cáo Google Adsense. Tại đó vì mình không có khai báo một trong bốn thuộc tính (top – left – bottom – right) nên nó Fixed theo thẻ cha. Hơi rắc rối nhưng sau này bạn sẽ kết hợp Fixed với Javascript để xây dựng các hiệu ứng trên website.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Position Fixed trong CSS2. Lời kết1. Bảo vệ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Position Fixed trong CSS2. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Position Fixed trong CSS2. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Position Fixed trong CSS2. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Position Fixed trong CSS2. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác...