position有5種值:absolute;relative;fixed;static;inherit。默認static趟妥。
注:relative是相對自身僻他,absolute是相對父元素
absolute:
1.設(shè)置了absolute的元素寬度是由內(nèi)容決定的,relative元素的寬度的則是取決于父元素的寬度
2.如果設(shè)置了absolute屬性然低,元素會讓出原來的位置仔役,處于另外一個層級掷伙。(完全脫離文檔流)
3.在沒有設(shè)置left,top等值的時候,雖然div已經(jīng)有了absolute元素的特性又兵,但是還會保持在之前的位置任柜,盡管已經(jīng)處在不同的層級卒废。這時候如果我們設(shè)置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>