1、relative对absolute的限制作用
- 限制
left/top/right/bottom定位 - 限制
z-index层级
只要relative设置了具体的z-index（不包括aoto），absolute定位的元素的层级跟自身的z-index不再有关系，完全取决于relative的z-index的大小
<div class="box box1">
<div class="con con1">relative:z-index=3;<br/>absolute:z-index=1;</div>
</div><!--- 防止元素因换行，中间产生空白符 影响页面样式
---><div class="box box2">
<div class="con con2">relative:z-index=1;<br/>absolute:z-index=3;</div>
</div>
.box {
display: inline-block;
width: 200px;
height: 200px;
color: #fff;
position: relative;
}
.con {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.box1 {
z-index: 3;
}
.box2 {
z-index: 1;
}
.con1 {
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.con2 {
background-color: #EC7259;
z-index: 3;
left: -20px;
}
relative层级高的在上面.png
- 限制在单独
absolute定位下的overflow的失效
2、relative对fixed的限制作用
- 只能限制
z-index层级
<div class="box box1">
box1
<div class="con con1">relative:z-index=3;<br/>absolute:z-index=1;</div>
</div><!--- 防止元素因换行，中间产生空白符 影响页面样式
---><div class="box box2">
box2
<div class="con con2">relative:z-index=1;<br/>absolute:z-index=3;</div>
</div>
.box {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
overflow: hidden;
}
.con {
position: fixed;
width: 300px;
height: 200px;
padding: 10px;
color: #fff;
box-sizing: border-box;
bottom: 0;
}
.box1 {
z-index: 3;
}
.box2 {
z-index: 1;
}
.con1 {
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.con2 {
background-color: #EC7259;
z-index: 3;
left: -20px;
}
fixed定位时只有层级受relative限制.png
3、relative和定位
- 相对于自身定位
- 定位过后，自身原本占据的位置空间依然在那
-
top/bottom和left/right对立属性同时存在时，top和left属性起作用
<div class="box">
<img class="img" src="./img/1000.png" alt="">
<img class="img img2" src="./img/1002.png" alt="">
<img class="img" src="./img/1005.jpg" alt="">
</div>
.box {
overflow: hidden;
}
.img {
width: 200px;
height: auto;
float: left;
position: relative;
}
.img2 {
top: 20px;
left: 20px;
right: 50px;
}
relative和定位.png
4、relative和层级
- 提高层叠上下文
- 新建层叠上下文与层级控制
注意，当relative的z-index为auto时，不会产生层叠上下文(IE6、IE7除外)：
<div class="box box1">
<div class="con con1">relative:z-index=3;<br/>absolute:z-index=1;</div>
</div><!--- 防止元素因换行，中间产生空白符 影响页面样式
---><div class="box box2">
<div class="con con2">relative:z-index=auto;<br/>absolute:z-index=3;</div>
</div>
.box {
display: inline-block;
width: 200px;
height: 200px;
color: #fff;
position: relative;
}
.con {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.box1 {
z-index: 3;
}
.box2 {
z-index: auto;
}
.con1 {
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.con2 {
background-color: #EC7259;
z-index: 3;
left: -20px;
}
relative的zIndex为auto时.png
5、relative的最小化影响原则
所谓relative的最小化影响原则，指的是尽量降低relative属性对其他元素或布局的潜在影响！
- 尽量避免使用
relative-
absolute定位不依赖relative
-
-
relative最小化- 把
relative单独拿出来放在一个空div里面进行处理
relative最小化.png
- 把
