position有5种值:absolute;relative;fixed;static;inherit。默认static。
注:relative是相对自身,absolute是相对父元素
absolute:
1.设置了absolute的元素宽度是由内容决定的,relative元素的宽度的则是取决于父元素的宽度
2.如果设置了absolute属性,元素会让出原来的位置,处于另外一个层级。(完全脱离文档流)
3.在没有设置left,top等值的时候,虽然div已经有了absolute元素的特性,但是还会保持在之前的位置,尽管已经处在不同的层级。这时候如果我们设置left和top都为0,就会基于最近的定位了的父元素进行偏移。(在这个例子中,div3就会偏移到左上角的位置)
<style>
div {
height:100px;
border:1px solid #999;
}
#div1{
background-color:yellow;
}
#div2{
background-color:orange;
}
#div3 {
background-color:skyblue;
position: absolute;
top: 20px;
}
#div4 {
background-color:lightgray;
}
</style>
<body>
<div id="div1">第一个div</div>
<div id="div2">第二个div</div>
<div id="div3">第三个div</div>
<div id="div4">第四个div</div>
</body>