Thuộc tính position được dùng để định vị phần tử. Các giá trị định vị bao gồm:
static — Mặc định. Phần tử hiển thị theo luồng tài liệu bình thường.
relative — Phần tử vẫn ở luồng bình thường nhưng có thể dịch chuyển bằng top/right/bottom/left.
absolute — Phần tử bị loại khỏi luồng bình thường, định vị tương đối với ancestor gần nhất có position khác static.
fixed — Phần tử định vị cố định so với viewport, không cuộn theo trang.
Dưới đây là mã minh họa định vị phần tử với CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { color: white; text-align: center; height: 100px; width: 100px; } .static { position: static; background-color: greenyellow; } .relative { position: relative; left: 50px; background-color: rgb(255, 47, 47); } .absolute { position: absolute; right: 50px; top: 20px; background-color: hotpink; } </style> </head> <body> <h1>Position elements example</h1> <div class="static">STATIC</div> <div class="relative">RELATIVE</div> <div class="absolute">ABSOLUTE</div> </body> </html>
Kết quả
Mã trên cho kết quả sau:
