[BÀI 9]Position Relative và Absolute trong CSS
Position Relative và Absolute trong CSS Position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác . Nó gồm 5 giá trị là relative, absolute, fixed static và inherit. Absolute là cách định vị trí của một ...
Position Relative và Absolute trong CSS
Position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác. Nó gồm 5 giá trị là relative, absolute, fixed static và inherit.
Absolute 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, 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.
fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
static: Đưa phần tử về hiển thị theo kiểu mặc định.
Inherit : Thừa hưởng các thuộc tính từ thành phần cha.
Để thiết lập vị trí cho thành phần ta sử dụng 4 thuộc tính sau :
- top: lên phía trên
- right: qua bên phải
- bottom: xuống phía dưới
- left: qua bên trái
Chú ý : Chỉ có thể sử dụng nhiều nhất 2 giá trị, các cặp giá trị là ( top – right ), ( right – bottom ), (bottom – left ), ( left – top ).
Ví dụ sự khác biệt khi sử dụng relative và absolute :
Không sử dụng :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style type="text/css"> .relative{ margin-left: 100px; awidth: 400px; height: 400px; border: solid 2px red; } .absolute{ awidth: 150px; height: 150px; border: solid 2px blue; position: absolute; top: 100px; left: 70px; } </style> <body> <div class="relative"> <div class="absolute"></div> </div> </body> |
Kết quả :
Có sử dụng :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style type="text/css"> .relative{ margin-left: 100px; awidth: 400px; height: 400px; border: solid 2px red; position: relative; } .absolute{ awidth: 150px; height: 150px; border: solid 2px blue; position: absolute; top: 100px; left: 70px; } </style> <body> <div class="relative"> <div class="absolute"></div> </div> </body> |
Kết quả :
Các bạn đã thấy sự khác nhau.
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 !!!
