Định vị tương đối với phần tử cha trong CSS
Nếu một phần tử được đặt là relative, và
phần tử con của nó - absolute, thì phần tử con này
sẽ được định vị tương đối với phần tử cha của nó,
chứ không phải tương đối với cửa sổ trình duyệt.
Thông thường, trong trường hợp này, phần tử cha được chỉ định là relative mà không có độ lệch. Trong trường hợp này, phần tử cha không có gì thay đổi, nhưng tất cả các phần tử con của nó bây giờ sẽ được định vị tương đối với nó.
Chúng ta hãy xem các ví dụ.
Ví dụ
Đầu tiên, hãy tạo một khối cha và một khối con mà không định vị:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
width: 200px;
height: 200px;
border: 1px solid green;
}
:
Ví dụ
Bây giờ hãy định vị tuyệt đối khối màu xanh lá cây.
Vì phần tử cha không được chỉ định là relative,
phần tử con sẽ được định vị tương đối với
cửa sổ trình duyệt:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
Ví dụ
Bây giờ hãy chỉ định phần tử cha là relative. Trong
trường hợp này, phần tử con sẽ được định vị
tương đối với phần tử cha của nó:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
Bài tập thực hành
Trong các bài tập tiếp theo, khối chính được căn giữa
bằng margin với giá trị
auto, còn các khối khác được định vị
tương đối với nó bằng cách sử dụng
thuộc tính position.