A relative positioning (parent relative)
Relative positioning is the movement of an element relative to its original position in the standard stream
Effect picture:
This is an effect picture of a (father) big box with three (sons son1, son2, son3) small boxes.
Now we set a relative positioning for son1 (yellow box) in the code and change its position. After refreshing, we found that the original frame box set aside space for the yellow box
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 100px;
height: 300px;
border: 1px solid black;
}
.son1{
width: 100x;
height: 100px;
background-color: #12B7F5;
}
.son2{
position: relative; /*给黄色盒子设置一个相对定位 */
left: 80px;
top: 120px;
width: 100px;
height:100px;
background-color: #f1e42b;
}
.son3{
width: 100px;
height: 100px;
background-color: #12B7F5;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
</html>
Features of relative positioning :
- Moved relative to its original position in the standard stream
- The original area of the standard stream continues to be occupied, but the following boxes still treat it as the standard stream.
Two: Absolute positioning (child absolute)
Absolute positioning means that the element moves the position of the parent element with positioning.
1 Completely off-standard-not occupying the position at all.
2 If the parent element is not positioned, the browser is not positioned correctly
Absolute positioning features: *
- Absolute positioning is to move the position of the parent element with positioning. If the parent is not positioned, the position is moved based on the browser document
- It does not retain its original position and is completely out of standard flow.
- Because the absolute positioning is the box (fighting father), it should be used with the parent.
- Positioning formula: the son is no father