元素层级z-index解析
z-index元素层级解析
关于元素定位可以参照前文:https://www.cnblogs.com/wzx-blog/p/15659373.html
对于开启了定位元素;
可以通过z- index属性来指定元素的层级
z-index需要一个整数作为参数,值越大元素的层级越高
元素的层级越高越优先显示
如果元素的层级一样,则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
可选值;任意整数
实例:
.c1,.c2,{
width: 100px;
height: 100px;
}
.c1{
position: relative;
left: 10px;
top: 10px;
}
.c2{
position: relative;
left: 20px;
bottom: 20px;
}
<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>
两个块开启相对定位;元素层级高者,显示在上层。
.c1,.c2{
width: 100px;
height: 100px;
}
.c1{
position: relative;
left: 10px;
top: 10px;
}
.c2{
position: relative;
left: 20px;
bottom: 20px;
}
<div class="c1" style="background-color:coral; z-index: 0;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>
两个块开启相对定位;如果元素层级相同,则下方元素显示在上层。
.c1,.c2,.c3{
width: 100px;
height: 100px;
}
.c1{
position: relative;
left: 50px;
top: 20px;
}
.c2{
position: relative;
left: 20px;
bottom: 20px;
}
.c3{
position:absolute;
left: 20px;
top: 10px;
}
<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 0;">C2</div>
<div class="c3" style="background-color:cyan;z-index:0;">C3</div>
c1,c2开启相对定位,c3开启绝对定位(脱离文档流),即使c2,c3的元素层级相同,c3也在c2的上层;
而元素层级更高的c1在最上层。
c4,.d1{
width: 100px;
height: 100px;
}
.c4{
position: relative;
top: 10px;
}
.d1{
position: relative;
top: 10px;
left: 10px;
}
<div class="c4" style="background-color:darkseagreen; z-index: 5;">C4
<div class="d1" style="background-color:darkorchid; z-index: 2;">D1</div>
</div>
c4,d1开启相对定位,即使c4的元素层级比d1高,也不会盖住d1;及祖先的元素的层级再高也不会盖住后代元素。
.c1,.c2,.c3,.c4,.d1{
width: 100px;
height: 100px;
}
.c1{
position: relative;
left: 10px;
top: 20px;
}
.c2{
position: relative;
left: 30px;
bottom: 40px;
}
.c3{
position: relative;
left: 50px;
bottom: 100px;
}
.c4{
position: relative;
bottom: 190px;
}
.d1{
position: relative;
top: 10px;
left: 10px;
}
<div class="c1" style="background-color:coral; z-index: 1;">C1</div>
<div class="c2" style="background-color:cornflowerblue; z-index: 2;">C2</div>
<div class="c3" style="background-color:cyan;z-index:3;">C3</div>
<div class="c4" style="background-color:darkseagreen; z-index: 5;">C4
<div class="d1" style="background-color:darkorchid; z-index: -1;">D1</div>
</div>
子元素的层级是相对于祖先元素而论的,就比如d1的元素层级没有c1,c2,c3高,但是d1的祖先元素c4层级高于c1,c2,c3。所以d1依旧会显示在c1,c2,c3的上层。