Định vị tuyệt đối không tọa độ trong CSS
Thực tế thì việc chỉ định tọa độ khi định vị tuyệt đối
không phải là bắt buộc. Nếu một phần tử đơn giản
được ghi position với giá trị
absolute, thì nó sẽ trở thành phần tử được định vị tuyệt đối,
nhưng vẫn sẽ đứng ở chính vị trí mà nó
đã đứng. Trong khi đó tất cả các phần tử khác sẽ
hành xử như thể phần tử của chúng ta không tồn tại
và có thể chồng lên nó.
Hãy cùng xem xét qua các ví dụ.
Ví dụ
Đầu tiên hãy cùng tạo ba khối không có định vị và giữa chúng là một chữ nào đó:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Ví dụ
Bây giờ hãy thêm absolute cho khối màu xanh lá.
Kết quả là khối này sẽ ở nguyên vị trí,
còn tất cả các phần tử phía dưới sẽ hành xử như thể
phần tử của chúng ta không tồn tại và sẽ chồng lên nó:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Ví dụ
Bây giờ hãy cùng thêm thuộc tính left,
mà không thêm vị trí theo chiều dọc. Kết quả là
theo chiều ngang khối của chúng ta sẽ đứng ở giá trị
được chỉ định, còn theo chiều dọc - nó sẽ vẫn đứng
ở chỗ mà nó đã đứng:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* thêm vị trí theo chiều ngang */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Ví dụ
Bây giờ hãy làm ngược lại, thêm thuộc tính
top, mà không thêm vị trí theo chiều ngang.
Kết quả là theo chiều dọc khối của chúng ta sẽ đứng
ở giá trị được chỉ định, còn theo chiều ngang -
nó sẽ vẫn đứng ở chỗ mà nó đã đứng:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* thêm vị trí theo chiều dọc */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
