CSS position屬性
阿新 • • 發佈：2018-12-09
position屬性用來規定元素的定位型別，一共有如下幾種取值：
| 值 | 描述 |
|---|---|
| absolute | 絕對定位，相對於position屬性為static定位以外的祖先元素進行定位。如若沒有定位過的祖先，則相對於文件左上角的位置進行定位。此時元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性來規定。 |
| relative | 相對定位，相對於其正常位置進行定位。即相對於原來的自己進行移動，原來的位置則空在那不會被別的元素佔用 |
| static | 該值是預設值。表示沒有定位，元素出現在正常的流中。此時top, bottom, left, right 或者 z-index都不起作用。 |
| fixed | 也表示絕對定位，但是是相對於瀏覽器視窗進行定位。 |
absolute屬性：採用該值進行絕對定位的元素不會被預留空間，脫離文件流，可以設定外邊距，且不會與其他邊距進行合併的。該元素相對於非static祖先元素進行定位，當祖先元素設定了margin、padding等值時，相對於祖先元素的padding開始點即從padding的左上角開始定位。並且也會對該元素的兄弟元素位置造成影響，因為此時相當於把該元素往 Z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，並且還會覆蓋下層的元素。並且該元素將變為塊級元素且元素的寬度由原來的100%變為了 auto。 relative屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 
#div1{
width:100px;
height:100px;
background-color: #eee;
position:absolute;
top:50px;
left:50px;
}
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
position:relative;
top:20px;
left:20px;
}
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
position:absolute;
top:50px;
left:50px;
}
#main{
margin-left:100px;
margin-top:100px;
padding:20px;
border:1px solid black;
position:absolute;
}
#div1{
width:100px;
height:100px;
background-color: #eee;
border:1px solid black;
margin-top:50px;
margin-bottom:50px;
}
#div2{
width:100px;
height:100px;
background-color: #555;
border:1px solid red;
margin-top:50px;
}效果圖為：
#div1{
width:100px;
height:100px;
background-color: #eee;
border:1px solid black;
margin-top:50px;
margin-bottom:50px;
}
#div2{
width:100px;
height:100px;
background-color: #555;
border:1px solid red;
margin-top:50px;
position:absolute;
}