Absolute position trong CSS

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:

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:

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”) sẽ hiểu rõ hơn về Absolute position trong CSS:

–         Trong file: bai1html.html ta gõ như sau:

–         Trong file: style.css ta định dạng sau:

–         Kết quả:

absolute position

Leave a Reply


*