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 {
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
}
</style>
</head>
<body>
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>
此時若將div1的樣式改為如下,則效果圖如下所示:
#div1{
width:100px;
height:100px;
background-color: #eee;
position:absolute;
top:50px;
left:50px;
}
從圖片可以看出,absolute定位的元素脫離了文件流。 此時若將div2的樣式改為如下,則效果圖如下所示:
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
position:relative;
top:20px;
left:20px;
}
relative定位的元素總是相對於自身進行偏移。 將css樣式設定為如下:
#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;
}
可見將父元素設定為absolute之後,子元素設定為absolute屬性就是相對於父元素的padding左上角進行定位了。並且塊級元素設定了absolute之後,寬度從100%變成了auto。 當設定css樣式如下:
#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;
}
效果圖為: 可見此時兩個div的外邊距是會合並的; 當設定div2的position屬性為absolute時,再設定div2的外邊距則不會與別的元素外邊距進行合併,如下所示:
#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;
}