[BÀI 11]Sử dụng Position: Fixed trong CSS
Position: Fixed – Position : Fixed cho kết quả tương tự như Position: Absolute, chỉ khác là khi kéo thanh cuộn ngang, dọc thì vị trí của đối tượng được giữ nguyên không thay đổ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 một trong các thẻ cha ...
Position: Fixed
–Position: Fixed cho kết quả tương tự như Position: Absolute, chỉ khác là khi kéo thanh cuộn ngang, dọc thì vị trí của đối tượng được giữ nguyên không thay đổ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 một trong các thẻ cha của nó có khai báo Relative thì nó sẽ lấy thẻ cha của nó làm chuẩn. Tuy nhiên, nếu bạn khai báo thêm một trong các thuộc tính top, bottom, left, right thì dù thẻ cha của nó có khai báo Relative thì nó vẫn lấy cửa sổ trình duyệt để làm chuẩn.
–Position: Fixed hay được sử dụng để tạo các thành phần cố định như quảng cáo, các nút bấm,…
Chúng ta đi tìm hiểu các ví dụ để thấy rõ hơn nhé :
Ví dụ 1 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body{ height: 1000px; background: green; text-align: center; font-size: 30px; } .fixed{ height: 60px; line-height: 30px; background: red; color: #fff; position: fixed; awidth: 100%; top:0px; } .bottom{ height:100px; background-color:pink; margin-top:300px; } </style> </head> <body> <div class="fixed"> Laptrinhphp.com.vn </div> <div class="bottom"> Devpro.edu.vn </div> </body> </html> |
Ở đây không khai báo thẻ nào là Relative thì mặc định thành phần khai báo Fixed sẽ chọn body làm chuẩn.
Ví dụ 2 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body{ height: 1000px; background: green; text-align:center; font-size:30px; } .relative{ margin-top:200px; height:500px; background-color:yellow; position:relative; } .fixed{ height: 60px; line-height: 30px; background: red; color: #fff; position: fixed; awidth: 100%; } .bottom{ height: 100px; background-color: pink; margin-top:400px; } </style> </head> <body> <div class="relative"> <div class="fixed"> Laptrinhphp.com.vn </div> </div> <div class="bottom"> Devpro.edu.vn </div> </body> </html> |
Ở đây có khai báo một thẻ là Relative và thẻ Fixed không có các thành phần top-bottom-left-right nên thẻ Fixed sẽ lấy thẻ Relative đó làm chuẩn.
Ví dụ 3 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body{ height: 1000px; background:green; text-align:center; font-size:30px; } .relative{ margin-top:200px; height:500px; background-color:yellow; position:relative; } .fixed{ height:60px; line-height:30px; background:red; color:#fff; position:fixed; awidth:100%; top:100px; } .bottom{ height:100px; background-color:pink; margin-top:400px; } </style> </head> <body> <div class="relative"> <div class="fixed"> Laptrinhphp.com.vn </div> </div> <div class="bottom"> Devpro.edu.vn </div> </body> </html> |
Ở đây có khai báo một thẻ là Relative nhưng thẻ Fixed có thành phần top nên thẻ Fixed sẽ lấy cửa sổ trình duyệt làm chuẩn.
Các bạn coppy code ở các ví dụ về máy chạy tham khảo để hiểu rõ hơn nhé !!
Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.
Chúc các bạn thành công !!!
