相对（relative）定位和绝对（absolute）定位

大家好，欢迎来到IT知识分享网。

什么叫脱离文档流

脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右，自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制，把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是，dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。

1.相对定位（relative）

相对于原来位置（原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。

效果图：我们可以看出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