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:
Lý thuyết xong » Thực hành thôi…
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:
2 | <div class="box1"></div> |
3 | <div class="box2"></div> |
4 | <div class="box3"></div> |
5 | <div class="box4"></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
1 | #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:
1 | .box1, .box2, .box3, .box4{background: #777; width: 150px; height: 100px; color: white; padding: 10px} |
2 | .box1{position: absolute; top: 0; left: 0} |
3 | .box2{position: absolute; top: 0; right: 0} |
4 | .box3{position: absolute; bottom: 0px; left: 10px} |
5 | .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
nguồn: http://www.ewebvn.com
No Comment to " Tìm hiểu về CSS absolute position "