使用top和left属性大概会招致成分互相重叠在一起,此时能够选取z-index属性。z-index属性用来支配重叠成分的呈现顺序,值较高的因素将掩盖值非常的低的要素。假诺应用值-壹,则意味成分将有关页面暗中同意文本的背后,那对于设置背景图案是很有用的。尽管把Computer显示器看作X-Y平面的话,那么z轴正是垂直于荧屏的。必须小心的是:z-index属性在安装了position并取值为“absolute”或“relative”时有效。

     使用top和left属性大概会导致成分互相重叠在1块儿,此时得以动用z-index属性。z-index属性用来决定重叠成分的展示顺序,值较高的因素将覆盖值十分低的成分。假诺选用值-壹,则象征成分将有关页面暗中同意文本的末尾,那对于设置背景图案是很有用的。假设把计算机显示屏看作X-Y平面包车型地铁话,那么z轴正是垂直于显示器的。必须注意的是:z-index属性在装置了position并取值为“absolute”或“relative”时有效。

    下边的代码中,分别选拔了七个div成分,八个div成分的position属性都设置为absolute,偏移地点、z-index值各差异样。

    上面包车型地铁代码中,分别使用了七个div成分,多少个div成分的position属性都设置为absolute,偏移地方、z-index值各不一样样。

 

 

①案例HTML代码:

①案例HTML代码:

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <link rel=”stylesheet” href=”test.css”/>
</head>
<body>
<div id=”box”>
    <div id=”top”>
        <img src=”top.jpg” alt=”top”/>
    </div>
    <div id=”middle”>
        <img src=”middle.jpg” alt=”middle”/>
    </div>
    <div id=”bottom”>
        <img src=”bottom.jpg” alt=”bottom”/>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <link rel=”stylesheet” href=”test.css”/>
</head>
<body>
<div id=”box”>
    <div id=”top”>
        <img src=”top.jpg” alt=”top”/>
    </div>
    <div id=”middle”>
        <img src=”middle.jpg” alt=”middle”/>
    </div>
    <div id=”bottom”>
        <img src=”bottom.jpg” alt=”bottom”/>
    </div>
</div>
</body>
</html>

 

 

①案例CSS代码:

①案例CSS代码:

#box{
    width:500px;
    height:600px;
    border:3px dashed #000;
}
#top{
    position:absolute;
    left:170px;top:170px;
    z-index:3;
}
#middle{
    position:absolute;
    left:100px;top:100px;
    z-index:2;
}
#bottom{
    position:absolute;
    left:40px;top:40px;
    z-index:1;
}

#box{
    width:500px;
    height永利开户送38元体验金,:600px;
    border:3px dashed #000;
}
#top{
    position:absolute;
    left:170px;top:170px;
    z-index:3;
}
#middle{
    position:absolute;
    left:100px;top:100px;
    z-index:2;
}
#bottom{
    position:absolute;
    left:40px;top:40px;
    z-index:1;
}

 

 

落实际效果益:

兑现效益:

 永利开户送38元体验金 1

 永利开户送38元体验金 1

相关文章