Thuộc tính vị trí được sử dụng để định vị một phần tử. tức là sau đây là các yếu tố định vị -
-
tĩnh - Hộp phần tử được bố trí như một phần của luồng tài liệu thông thường, theo sau phần tử đứng trước và phần tử đứng sau.
-
tương đối - Hộp của phần tử được bố trí như một phần của luồng thông thường, và sau đó bù lại một khoảng cách nào đó.
-
tuyệt đối - Hộp của phần tử được bố trí liên quan đến khối chứa của nó và hoàn toàn bị xóa khỏi dòng thông thường của tài liệu.
-
đã cố định - Hộp của phần tử được định vị tuyệt đối, với tất cả các hành vi được mô tả cho vị trí:tuyệt đối.
Sau đây là mã để định vị các phần tử bằng 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>
Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -