一:position: absolute;——绝对定位
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
加了position之后你会发现方块还是没有变化,这是因为position必须与left和top,right和bottom配合使用。
你只能left和top配合,不能left和right,没意义。
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
左边线距离左边100px,上边线距离上面100px,他就成这样了,或者你可以理解成他的坐标点就是(100,100).
一般情况下咱们不会设置底,因为有时候一个东西他是会没有底的。
这时候你会发现小方块出生的时候左边和上面会有一个小空隙,这个小空隙不是margin就是padding是吧,那是谁的?
是body的!!是body的什么呢?
你可以吧body的margin和padding分别设置成0试一试,
是margin,
Body有个天生的margin是8像素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
height: 100px;
width: 100px;
background-color: red;
}
.box{
height: 100px;
width: 100px;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
现在让box变成150px,demo加个透明度opacity: 0.5;
接下来我让第一个盒子变成定位元素,position: absolute;
你会发现绿色的方块上去了,这就是层模型的特点。
绝对定位的特点:
脱离原来位置就行定位;
证明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo1{
height: 200px;
width: 200px;
background-color: orange;
}
.demo2{
height: 100px;
width: 100px;
background-color: black;
}
.demo3{
height: 50px;
width: 50px;
background-color: yellow;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2">
<div class="demo3">
</div>
</div>
</div>
</body>
</html>
然后我再第二个盒子(demo2)上面加一个margin-left: 100px;他就带着他的孩子窜过来了。
在第一个盒子(demo1)上面加一个margin-left: 100px;
让大盒子带他们俩个一起过来。
现在我给第三个盒子(demo3)设置一个绝对定位position: absolute;没变化,只不过他变成了一个可定位元素而已。
现在我加一个left: 50px;
那说明什么问题,说明他相对于文档的边框进行定位是吧。
不对,咱还得实验。
我给他的父级(demo2)加一个position: relative;让他的父级变成可定位的元素,relative和absolute都行。
他就跑这里来了。
我如果把他的父级的定位摘掉,放到他的祖父级那里,
他就变这里来了。
如果祖父级也没有定位,他就回到这里
如果他的祖父级和他的父级都有定位,他还是相对于他父级的。
总结:
Absolute:相对于最近的有定位的父级进行定位,如果没有最近的父级定位,就相对于文档进行定位。