完全理解absolute 和 relative,再也不用背概念
理解absolute和relative能更高效的在前端开发的过程中对页面的元素进行定位。查阅了很多网上的资料,都没有很好的介绍它们的玩法。下面这篇文章将介绍absolute和relative的概念知识,以及用法。帮助快速理解他们的作用。
1.Document flow(文件流)
首先,要先了解什么是文件流,文件流可以理解为所有的元素占有自己的空间,有自己的位置和顺序,排列在一个页面上。
每一个网页可以看作是一个文件流,里面的元素都有自己的排列方式.
2. Absolute positioning(绝对定位)
元素根据它最近的以定位的父元素,进行定位。
元素定位移动后,脱离文件流(如下图所示),原来的元素占有空间不存在,所以页面布局就会改变.
1)示例,四个同级元素的absolute定位
在示例中有四个同等大小的元素默认static排列在一个页面。
<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>
改变two的位置为absolute,此时以定位的body元素移动top 20, left 20。
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}
2)示例,以四个不同级的元素的absolute定位.
四个元素互相嵌套,中心排列在页面中.
<body>
<div class="box-1">box-1
<div class="box-2">box-2
<div class="box-3">box-3
<div class="box-4">box-4
</div>
</div>
</div>
</div>
</body>
改变box 4的定位为top 10px, left 10 px. 此时box 4 以定位的body为父元素定位, box1,box2,box3的定位都是unset,所以box4的最近父元素为body.
body {
background-color: rgb(87, 124, 124);
}
.box-1 {
margin: 0 auto;
background-color: aquamarine;
width: 400px;
height: 400px;
text-align: left;
}
.box-2 {
background-color: #ffff00;
width: 300px;
height: 300px;
}
.box-3 {
background-color: palevioletred;
width: 200px;
height: 200px;
}
.box-1, .box-2, .box-3, .box-4{
display: flex;
justify-content: center;
align-items: center;
}
.box-4 {
background-color: purple;
width: 100px;
height: 100px;
top: 10px;
left: 10px;
position: absolute;
}
2)示例,以四个不同级的元素的absolute定位.
将box3增加absolute定位特性, 不设置移动top, left, right, bottom 参数,所以默认都为0. 所以在这个示例中box3 是box4的最近父元素而不是body.
body {
background-color: rgb(87, 124, 124);
}
.box-1 {
margin: 0 auto;
background-color: aquamarine;
width: 400px;
height: 400px;
text-align: left;
}
.box-2 {
background-color: #ffff00;
width: 300px;
height: 300px;
}
.box-3 {
background-color: palevioletred;
width: 200px;
height: 200px;
position: absolute;
}
.box-1, .box-2, .box-3, .box-4{
display: flex;
justify-content: center;
align-items: center;
}
.box-4 {
background-color: purple;
width: 100px;
height: 100px;
}
改变box4 定位为absolute , top 10px, left 10px. 他会根据box3的定位而改变位置.
body {
background-color: rgb(87, 124, 124);
}
.box-1 {
margin: 0 auto;
background-color: aquamarine;
width: 400px;
height: 400px;
text-align: left;
}
.box-2 {
background-color: #ffff00;
width: 300px;
height: 300px;
}
.box-3 {
background-color: palevioletred;
width: 200px;
height: 200px;
position: absolute;
}
.box-1, .box-2, .box-3, .box-4{
display: flex;
justify-content: center;
align-items: center;
}
.box-4 {
background-color: purple;
width: 100px;
height: 100px;
top: 10px;
left: 10px;
position: absolute;
}
3. Relative positioning(相对定位)
relative相对定位,根据自己原来正常的文件流的位置来定位移动.
原来的元素占有空间不会消失,所以它不会改变页面的布局.
1)示例,四个同级元素的relative定位
在示例中有四个同等大小的元素默认static排列在一个页面。
<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>
改变two的位置为relative,此时以定位的body元素移动top 20, left 20。
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}
two元素原来的空间没有消失,two相对自己原来的定位移动 top 20px, left 20px.
总结
1.每个元素都有自己的空间,位置,顺序,以及其他属性,在每一个文件流中/页面中.
2.absolute根据最近父亲元素的定位而定位移动,原来的占有空间消失,页面改变.注意:如果不定义top,left, right,bottom, 位置默认为0. 父亲元素是以定位的元素,没有absolute,relative属性的元素为position: unset. 所以这些元素不是合格的父元素. 则会找body作为父元素进行定位.
3.relative根据原来自己的定位而定位移动,原来占有的空间不会消失,页面布局不会改变。