Div入门之div定位position，绝对定位absolute,相对定位relative

来源：互联网发布：见一叶而知秋编辑：程序博客网时间：2024/05/02 04:28

定位有两种：

1:绝对定位

position:absolute

top,bottom,left,right 写出具体数值

注：当多个div在同一个位置时，显示哪个层由z-index的值决定，值较大的有限显示

//style.cssh2.first{position:absolute;left:100px;top:150px;background:red;}#second{position:absolute;left:110px;top:10px;width:300px;height:100px;background:pink;z-index:1}#third{position:absolute;left:110px;top:10px;width:200px;height:100px;background:green;z-index:2}#four{width:100px;height:150px;background:blue;}

<html><head><title>div定位绝对定位</title><link rel = "stylesheet" href = "style.css" type = "css/style.css"/></head><body><h2 class="first">这是带有绝对定位的标题</h2><div id="second">这是一个div</div><div id="third">这是另一个div</div><div id="four">一个咯</div></body></html>

2:相对定位

position:relative

相对于正常位置的top.bottom,left,right

然后有个地方要注意的就是，后一个的相对位置时以前一个绝对位置为基准点的

//style.cssh2.first{position:relative;left:-20px;}h2.second{position:relative;left:20px;}#third{position:relative;left:50px;top:0px;width:200px;height:100px;background:green;}#four{position:relative;left:80px;top:0px;width:100px;height:150px;background:blue;}

<html><head><title>div定位相对定位</title><link rel = "stylesheet" href = "style.css" type = "css/style.css"/></head><body><h2>这是带有绝对定位的标题</h2><h2 class="first">这是带有绝对定位的标题</h2><h2 class="second">这是带有绝对定位的标题</h2><div id="third">这是另一个div</div><div id="four">一个咯</div></body></html>

0 0