Giá trị âm trong định vị CSS
Các thuộc tính top, right,
bottom và left chúng ta đã học có thể nhận
không chỉ giá trị dương mà còn cả giá trị âm.
Chúng ta hãy xem qua các ví dụ.
Ví dụ
Trong ví dụ sau, phần tử được định vị tuyệt đối
so với phần tử cha của nó và đứng ở vị trí
0 từ trên, 0 từ trái:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Ví dụ
Bây giờ hãy di chuyển phần tử đến vị trí
-20px từ trên, -30px từ trái:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Trong mẫu sau, khối màu xanh lá đứng ở
giữa màn hình nhờ margin, còn
các khối màu đỏ được định vị tương đối so với
nó. Hãy tạo lại trang theo
mẫu đã cho:
