关于四种定位的浅析和测试

最新推荐文章于 2022-09-22 18:38:22 发布

waaa_fool

最新推荐文章于 2022-09-22 18:38:22 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/waaa_fool/article/details/81535948

关于四种定位的浅析和测试

static:基于文档流定位。没有产生新的子层。

fixed:脱离文档流定位，基于浏览器视图定位，不保留原来位置。产生新的子层。

absolute:脱离文档流定位，不保留原来位置。产生新的子层。且相对于其最近的先辈（采用fixed，relative或者absolute定位）定位。

Relative:脱离文档流定位，保留原来位置。产生新的子层。相对于自己初始文档流的位置定位。

同时，fixed，absolute和relative产生的子层的z-index默认为0；至于当出现两个图层在同一个位置时，谁覆盖谁，则需要看在文档流中的位置了，总是最新的覆盖旧的。

下面测试和分析：

static定位，这个是默认定位方式

代码：

DOM

<div class="test1">
<a href="###">我喜欢我</a>
<a href="###">我喜欢我</a>
<a href="###">我喜欢我</a>
</div>
<div class="test2">
</div>

CSS

@charset "UTF-8" ;

*{
margin:0px;
padding: 0px;
}
.test1{
height:100px;
width: 100px;
background-color:grey;
color:red;
}
.test2{
height:200px;
width: 200px;
background-color: yellow;
}

结果：

结果分析：

当默认是static定位时，是根据文档流的位置来显示的，block元素独占一行，block元素之间上下罗列，而inline元素则是在block元素内从左到右展示，非独占一行。

2、fixed定位

dom如上；

css:

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}
.test1{
position:fixed;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
height:100px;
width: 100px;
background-color:grey;
color:red;
}
.test2{
height:200px;
width: 200px;
background-color: yellow;
}

结果：

结果分析：无论如何拉动浏览器右侧的翻页，均保持在用户浏览器界面的中心。同时我们可以看到fixed定位的原本文档的位置没有保留（也就是表现的黄色框移动到上面位置），同时，我们可以发现，如果将黄色的区域扩到到width:700px;height:700px;结果如下图：

我们发现，灰色区域仍然存在原位置，黄色区域的位置也没被改变，这说明，他们分层次了，可以想象成空间z轴上不同层次，人从z轴上半轴顶部俯视。甚至此时我们将黄色区域的z-index:999;和灰色区域的z-index:0;（z-index表示的是z轴，我们电脑屏幕是x,y确定的二维平面，图层也有上下之分，即这个层次是z轴，用z-index来设置，越大就离我们越近，即z-index大的图层覆盖z-index小的图层）仍然没有用，为什么呢？其实就是因为你没有给黄色区域设置position:fixed/absolute/relative，z-index设置只能在这三种定位中有效。

所以总结一下：fixed会创造一个新的层，且脱离原来位置定位。其位置会固定在浏览器一个位置，不改变。

拓展：关于定位和z-index，还有一个故事，就是从父原则，想看分析的可以去这儿。

3、absolute：脱离原来位置定位。

dom代码不变

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}

.test1{
position: absolute;
height:100px;
width: 100px;
background-color:grey;
color:red;
}
.test2{
height:200px;
width: 200px;
background-color: yellow;
}

结果：

结果分析：我们可以看到出现了和fixed定位一样的情况，不再保留灰色区域的文档流位置，同时进行了分层次。

再看一个测试:

dom

<div class="test1">
    <div class="test2">
    </div>
</div>

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}

.test1{
margin: 20px;
height:200px;
width: 200px;
background-color:grey;
color:red;
}
.test2{
position: absolute;
top:10px;
left: 10px;
height:100px;
width: 100px;
background-color: yellow;
}

结果：

我们把灰色区域的position改为fixed，absolute或者relative的话，就会出现如下结果：

分析：其实absolute是寻找其长辈元素中第一个非static定位的父辈元素进行定位。

总结：absolute定位是脱离原来位置的定位，其会变成一个新的层次。

4、relative：保留原来位置的定位

dom

<div class="test1">
</div>
<div class="test2">
</div>

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}

.test1{
position: relative;
top:250px;
left:250px;
height:200px;
width: 200px;
background-color:grey;
}
.test2{
height:300px;
width: 300px;
background-color: yellow;
}

结果：

结果分析：我们可以看到，分层了，同时灰色位置的文档流位置保留。

再看另一个测试：

dom

<div class="test1">
    <div class="test2">

    </div>
</div>

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}

.test1{
margin:50px;
height:200px;
width: 200px;
background-color:grey;
}
.test2{
position: relative;
height:100px;
width: 100px;
background-color: yellow;
}

结果：

结果分析：我们不管改变灰色区域的position为何值。位置都不变，实际上，relative的定位总是相对于父元素定位。

总结：relative定位会生成子层。同时relative相对于初始文档流位子定位。

5、生成子层颜色的覆盖

dom

</div> 
<div class="test2">
</div>
<div class="test3">
</div>

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}
.test1{
position: fixed;
top:70px;
height:200px;
width: 200px;
background-color:grey;
opacity: 1; 
}
.test2{
position: relative;
top:0px;
height:100px;
width: 100px;
background-color: yellow; 
}
.test3{
position: relative;
top:-50px;
height: 100px;
width:100px;
background-color: red;
}

结果：