Absolute position là gì?
Nói dễ hiểu nhất, Absolute position là cách định vị trí của một thành phần bên trong không gian thành phần chứa chúng (thành phần mẹ), mà không phụ thuộc vào margin hay float. Và khi sử dụng absolute position, bạn có thể xếp các thành phần chồng lên nhau (Ví dụ: bạn có thể chồng một đoạn văn bản lên trên một ảnh).
Điểm lưu ý: Để sử dụng được absolute position, thành phần mẹ phải được gán position là relative, nếu thành phần mẹ không được gán relative, thì mặc định thành phần <body> sẽ được coi là thành phần relative.
Cách căn chỉnh vị trí của một thành phần như thế nào?
Absolute position dựa vào 4 vị trí: top, right, bottom, left cùng với các đơn vị đo như: px, cm, em, %… để canh chỉnh vị so với thành phần chứa nó. Trong thực thế bạn chỉ dựa vào một trong các cặp ví trí sau: top-left, top-right, bottom-left và bottom-right là có thể canh chỉnh vị trị của một thành phần:
Bây giờ chúng ta sẽ cùng ứng dụng để hiểu rõ hơn về Absolute position, ví dụ bên dưới chúng ta sẽ căn chỉnh vị trí của các thành phần div: box1, box2, box3 và box4 tại các ví trí khác nhau trong thành phần div mẹ (id=”wrapper”):
Mã HTML:
<div id="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
Trước tiên: gán thuộc tính position: relative cho thành phần wrapper, tạo border và gán kích thước để dễ phân biệt
#wrapper{position: relative;width: 500px; height: 400px; border: 1px solid #cfcfcf}
Căn chỉnh các thành phần với Absolute position:
.box1, .box2, .box3, .box4{background: #777; width: 150px; height: 100px; color: white; padding: 10px}
.box1{position: absolute; top: 0; left: 0}
.box2{position: absolute; top: 0; right: 0}
.box3{position: absolute; bottom: 0px; left: 10px}
.box4{position: absolute; bottom: 70px; right: 10px}
Và đây là kết quả:
Bạn hãy thử thay đổi các giá trị khác để kiểm tra sự thay đổi.
Kết Luận:
Để sử dụng được absolute position, điểm mấu chốt quan trọng nhất đó là phải xác định được thành phần mẹ và đặt thuộc tính position: relative.
Ngoài relative, absolute, position còn có các giá trị sau:
- static: (Giá trị mặc định khi không được khai báo), các thành phần sẽ được hiện thị theo vị trí mặc định trong cấu trúc của HTML
- fixed: Cố định thành phần tại một vị trí và không thay đổi khi cuộn trang
- inhertit: Kết thừa từ giá trị position của thành phần cha