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

来源:互联网 发布:软件项目保密协议 编辑:程序博客网 时间:2024/05/22 00:31

掌柜的上代码:

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;}
0 0
原创粉丝点击