z-index应用总结（转）

z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

 一、基本

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

示例：有两个DIV，将第二个向上移动50px，正常情况

对第二个添加z-index属性

示例源码：

html：

<body>
   <div class="Box1"></div>
    <div class="Box2"></div>
</body>

css：

.Box1{
width:150px;
height:150px;
background-color:red;
}
.Box2{
position:relative; 
top:-50px; 
width:100px;
height:100px;
background-color:black;
}

 css(z-index)：

.Box1{
width:150px;
height:150px;
background-color:red;
}
.Box2{
position:relative; 
top:-50px; 
width:100px;
height:100px;
background-color:black;
z-index: -5;
}

 

 

注：z-index属性只对定位元素有效。

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

示例：

html：

<body>
   <div class="Box1"></div>
    <div class="Box2"></div>
</body>

 css：

.Box1{
width:150px;
height:150px;
background-color:red;
z-index:30
}
.Box2{
position:relative; 
top:-50px; 
width:100px;
height:100px;
background-color:black;
z-index: 10;
}

虽然第一个div的z-index比第二个div大，但是由于第一个未定位，其Z-index属性未起作用，所以仍然会被第二个div覆盖。

 

二、相同Z-index谁上谁下

情况一：如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且Z-index相同发生位置重合现象，那么按文档流顺序，后面覆盖前面的。

源码：

html：

<body>
    <div class="Box1"></div>
    <div class="Box2"></div>
</body>

 css：

.Box1{
position:relative;
width:150px;
height:150px;
background-color:red;
}
.Box2{
position:relative; 
top:-50px; 
width:100px;
height:100px;
background-color:black;
}

 

  情况二：如果两个元素都没有设置Z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。

html:

<body>
    <div class="Box1"></div>
    <div class="Box2"></div>
</body>

 CSS:

.Box1{
position:relative;
top:50px;
width:150px;
height:150px;
background-color:red;
}
.Box2{
width:100px;
height:100px;
background-color:black;
}

 

 

三、父子关系处理

如果父元素Z-index有效，那么子元素无论是否设置Z-index都和父元素一致，会在父元素上方。

例：

<body>
    <div class="Box1">
        <div class="Box2"></div>
    </div>
</body>
.Box1{
position:relative;
width:150px;
height:150px;
background-color:red;
z-index:10;
}
.Box2{
position:relative;
width:100px;
height:100px;
background-color:black;
z-index:-5;
}

虽然子元素设置Z-index比父元素小，但是子元素仍然出现在父元素上方。 

 如果父元素Z-index失效（未定位或使用默认值），那么定位子元素的Z-index设置生效。

<body>
    <div class="Box1">
        <div class="Box2"></div>
    </div>
</body>
.Box1{
position:relative;
width:150px;
height:150px;
background-color:red;
}
.Box2{
position:relative;
width:100px;
height:100px;
background-color:black;
z-index:-5;
}

子元素Z-index = -5生效，被父元素覆盖

 

四、兄弟之间子元素

如果兄弟元素的Z-index生效，那么其子元素覆盖关系有父元素决定。

<body>
    <div class="Box1">
        <div class="Box2"></div>
    </div>
    <div class="Box3">
        <div class="Box4"></div>
    </div>
</body>

 CSS：

.Box1{
    position:relative;
    width:100px;
    height:100px;
    background-color:#0e0;
    z-index:5;
}
.Box2{
    position:relative;
    width:50px;
    height:250px;
    background-color:black;
    z-index:50;
}
.Box3{
position:relative;
width:100px;
height:100px;
background-color:#0e0;
z-index:10;
margin-top:4px;
}
.Box4{
    position:relative;
    width:30px;
    height:150px;
    background-color:red;
    z-index:-10;
}

 虽然第一个div的子元素的Z-index比较高，但是由于其父元素Z-index比第二个div低，所以第一个div子元素会被第二个div及其子元素覆盖。

 

 

 

 

转自：http://www.cnblogs.com/dolphinX/p/3262469.html

 

posted @ 2017-08-03 10:18  Lucky锦  阅读(209)  评论(0)    收藏  举报