绝对路径/相对路径(div)

最新推荐文章于 2023-01-24 18:20:01 发布

3l-li

最新推荐文章于 2023-01-24 18:20:01 发布

阅读量1k

点赞数

文章标签： div 相对路径绝对路径

本文链接：https://blog.csdn.net/lxh_gdmu/article/details/48922501

版权

掌柜的上代码：

div.html

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>div文档</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<h2 class="pos_abs">这是带有绝对路径的标题</h2>
<div id="first">div第1个层</div>
<div id="second">div第2个层</div>
<div id="third">div第3个层</div>


</body>
</html>

div.css(亲们，为了养成好的习惯，小编用的都是外部样式的哦)

@charset "gb2312";
/* CSS Document */
h2.pos_abs{position:absolute;
left:150px;
top:100;
background:#3C9
}
#first{position:relative;
left:150px;
top:130px;
border:2px;
width:100px;
height:50px;
background:#00F;
}
#second{position:absolute;
left:300px;//位置和third的相同
top:100px;//位置和third的相同
width:100px;
height:100px;
background:#000;
color:#FFF;
z-index:3;//哪个id的z-index大，哪个就在上面，这里的是second的覆盖在#third上面
}
#third{position:absolute;
left:300px;//位置和second的相同
top:100px;//位置和second的相同
width:150px;
height:70px;
background:#FF0;
z-index:2;
}