你所不知道的z-index的用法

<style type="text/css"><br />   #div1,#div2{<br />       width:200px;<br />       height:200px;<br />       background-color:red;<br />       position: relative;<br />       z-index:1;<br />   }<br />    #div2{<br />        background-color:green;<br />        z-index:0;<br />    }<br />    #div1_1,#div2_1{<br />        width:100px;<br />        height:100px;<br />        background-color:black;<br />    }<br />    #div1_1{<br />        position:relative;<br />        z-index:-100;<br />        left:80px;<br />        top:140px;<br />    }<br />   #div2_1{<br />       background-color:yellow;<br />       z-index:999;<br />       position: relative;<br />       left:160px;<br />       top:-50px;<br />   }<br /><br /></style>

<br><div id="div1">
<br>    我是div1<br>    <div id="div1_1">
<br>        我是div1_1<br>    </div>
<br>
</div><br><div id="div2">
<br>    我是div2<br>    <div id="div2_1">
<br>        我是div2_1<br>    </div>
<br>
</div><br>

<style type="text/css"><br />    /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/<br />    #a,#b{<br />        width:100px;<br />        height:100px;<br />        background-color:red;<br />    }<br />    #b{<br />        background-color:green;<br />        margin-top:-20px;<br />        margin-left:20px;<br />    }<br />    #a{<br />        position:relative;<br />    }<br /><br /></style>

<br><div id="a">
<br>    我是A<br>
</div><br><div id="b">
<br>    我是B<br>
</div><br><br>然后你看到的是这样的情况：

这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面<br>，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：

 <style type="text/css"><br />        /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/<br />        #a,#b{<br />            width:100px;<br />            height:100px;<br />            background-color:red;<br />        }<br />        #b{<br />            background-color:green;<br />            margin-top:-20px;<br />            margin-left:20px;<br />        }<br />        #a_1{<br />            width:50px;<br />            height:50px;<br />            background-color:blue;<br />            position:relative;<br />            left:80px;<br />            top:50px;<br />        }<br /><br />    </style><br><br><br><div id="a">
<br>    我是A<br>    <div id="a_1">
<br>        我是A的子DIV<br>    </div>
<br>
</div><br><div id="b">
<br>    我是B<br>
</div><br>

3.有z-index参与的情况：<br>1.简单的堆叠：<br>#div1{<br>position:relative;<br>z-index:1;<br>}

#div2{<br>position:relative;<br><br>}

#div1{<br>position:relative;<br>z-index:0;<br>}

<div id="div1"></div><br><div id="div2">/div><br><div id="div3"></div>
<br>此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。<br><br>2.相对复杂的堆叠（z-index的从父原则）：<br>   意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！
<p>     最后再强调一下：z-index是允许为负的 ,其次z-index的值应该是一个整数，不带px，很多新手写宽高写惯了，顺便就把z-index的值带了px.其次，在使用z-index的时候，一定要配合position使用，不管这个position 的值时fixed,absolute还是relative，但在值为static和不设position的层级是一致的。</p>
<p>    总结一下，上面的例子好像很乱，实际情况真的不知道怎么使用才好。个人经验来看，首先看有无position，无position按先后顺序来看层级。有position，再看看是否有z-index，在父元素的子元素设置z-index的值时，一定要注意父元素是否设置了z-index，因为父元素会影响子元素的层级，这一点很重要，也是我们最最经常犯的错误。如果当你一个元素的z-index值设置最大或最小都没有效果时，不妨看看这是否你对z-index的从父原则没有理解透彻吧!最后再说点和本文无关的，css样式有很多属性都具有继承性，比如color,我们需要对其慢慢的了解，建议有时间大家可以去看看有关于css继承性方面的知识。</p>
<p> </p>
<p> </p>
<pre class="brush:php;toolbar:false"><br><br>