Home > Article > Web Front-end > About relative positioning in positioning layouts
About relative positioning in positioning layouts
- 高洛峰Original
- 2017-02-18 14:27:311514browse
About relative positioning of positioning layout in CSS-relative
One of the biggest characteristics of relative positioning is that it still occupies the original position after running away through positioning, and will not give it to the surrounding text flow. class object. Relative positioning is also relatively independent. It has the final say on what to do. When it is positioned, it is offset from its own position (relative to the object itself).
Relative positioning is often used in combination with absolute positioning. Generally, the relative positioning method is set for the parent, and the child elements can be conveniently absolutely positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{
width: 400px;
height: 300px;
background-color: orange;
}
/*红色区块设置为相对布局，虽然往下便宜150PX,但仍占据了位置，使得黄色，绿色无法浮动到最左边*/
.red{
width: 100px;
height: 100px;
background-color: red;
float: left;
position:relative;
margin-top: 150px;
}
.yellow{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.green{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
/*蓝色区块相对自身偏离了30px,10px,但黑色区块的位置是以蓝色之前的位置向下偏移10px*/
.blue{
width:50px;
height: 50px;
background-color: blue;
position: relative;
top:30px;
left:10px;
}
.black{
width:30px;
height: 30px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<p class="orange">
<p class = "red">
<p class = "blue"></p>
<p class = "black"></p>
</p>
<p class = "yellow"></p>
<p class = "green"></p>
</p>
</body>
</html>
##For more related articles about relative positioning in positioning layout, please pay attention to the PHP Chinese website!