什么叫脱离文档流
脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右,自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制,把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是,dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。
1.相对定位(relative)
相对于原来位置(原来位置指在文档流中默认的位置,若加上了浮动时,那么这个原来位置就是你设定浮动时的位置)的偏移,原来位置依然占据空间。
(1)box1和box2都没有设置position属性(没有设置float属性时)
效果图:我们可以看出box盒子设置的left(包括top,right,bottom等)属性根本没起到任何作用
(2)给box2加上position:relative,效果如图:这时候box2相对于原来的位置分别向右和下偏移了100px
(3)有float属性时:
(4)效果图:
(5)给box2加上position:relative后:相对于原来的位置偏移
(6)给两个标签都加上position:relative时:两个盒子都只相对于自己原来的位置偏移
2.绝对定位(absolute):
绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。
如下所示设置
<view class='view_constar11'>
<view class="box011">box011</view>
<view class="box012">box012</view>
<view class="box013">box013</view>
</view>
.view_constar11{
height: 230px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.box011{
width: 100px;
height: 100px;
background-color: #00ffff;
}
.box012{
width: 100px;
height: 100px;
background-color: #fa8072;
/*position: absolute;
top: 20px;
left: 20px; */
}
.box013{
width: 100px;
height: 100px;
background-color: #7fff00;
}
我们设置整体为横向显示,也就是整体的文档流方向正常是按照图1显示,当设置box012设置absolute和top、left时会发现box012已经脱离了文档流,box011和box013的排布相当于不考虑box012的存在。当同时box012也会覆盖到着个box
图1 未设置 absolute 图2 设置absolute
(1)给box1添加position:relative属性,给box02添加position:absolute属性
效果如图:box02的父级元素box2没有position属性,它就继续向上一级寻找,找到box1然后以box1为参照点移动。可以看到box02定位到了右下角,box03占据了box02 原有的位置(即absolute属性会删除原来位置占据的文档流空间),
(2)给box2设置position:absolute属性时,我们看到box02的位置是以box2位参照物来移动的。
(3)同样,我们给box03也加上position:absolute属性,此时box03的参照物也是box2