Absolute: liên quan đến vị trí của bố mẹ và thay đổi bố cục xung quanh vị trí đó. Nghĩa là: Định vị trí tương đói theo thẻ cha (thẻ khai báo relative) hoặc thẻ body nếu ko có khai báo.
Ta có thể ví
relative như một cái khung và absolute là một hòn bi di chuyển bên trong cái khung nên nó có thể lăn tới bất kì vị trí nào, thậm chí nó có thể lăn ra bên ngoài khung. Và để thiết lập vị trí thì ta sử dụng bốn 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
---
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
.main {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
.topleft {
width: 100px;
height: 100px;
background-color: red;
}
.topright {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: green;
}
.bottomleft {
position: absolute;
bottom: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: yellow;
}
.bottomright {
position: absolute;
bottom: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: orange;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: black;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="main">
<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomleft"></div>
<div class="bottomright"></div>
<div class="middle"></div>
</div>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét