定位元素的重叠

傷城~ 2022-07-15 02:00 189阅读 0赞

上篇我已经说了，position的元素都是漂浮起来的，肯定会发生一些重叠的现象，但是到底是谁覆盖了谁，又是谁伤害了谁呢？嘻嘻，当然正常情况下有先来后到之分，不过是后来的覆盖先到的。如果是特殊情况呢，有一个层叠定位属性  
z-index : auto | number

这就是定义优先级的。当然数字越大优先级越高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>position</title>
    <style>
    .Demo{
        position:absolute;
        width:200px;
        height:150px;
        border:2px solid #00F;
        background:#0F0;
        z-index:3;
        left:100px;
        top:140px;
    }
    .Demo2{
        position:absolute;
        width:200px;
        height:150px;
        border:2px solid #F00;
        left:130px;
        top:160px;
        background:#00F;
        z-index:2;
    }
    
    .Demo3{
        position:absolute;
        width:200px;
        height:150px;
        border:2px solid #F00;
        background:#FF0;
        left:160px;
        top:180px;
        z-index:1;
    }
    </style>
    </head>
    
    <body>
    <div class="Demo"></div>
    <div class="Demo2"></div>
    <div class="Demo3"></div>
    </body>
    </html>

从颜色的层叠可以明显看出层叠效果。

对于非定位元素用z-index元素是没什么卵用的  
。另外不用z-index的会被放到最底层，没毛病！

补充一点，在含有子元素的定位元素中，子元素不论z-index多低，但是还是会在父元素上面，但是在对于其他元素来说，不管子元素的z-index多高，他的显示还是会受到父元素的制约限制。也许这就是互相伤害吧！