DIV CSS3处理元素重叠 - yueyang2017_H5之家 - 中国HTML5教程资源分享第一站

HTML5技术

DIV CSS3处理元素重叠 - yueyang2017

字号+ 作者：H5之家来源：H5之家 2017-05-22 11:01 我要评论( )

①案例 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="m

①案例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代码：

#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;
}