CSS樣式表中的position屬性取值和作用
阿新 • • 發佈:2019-01-30
一、首先,我們大致看一下CSS樣式中position屬性的常用取值都有哪些:
從Dreamwaver給出的提示中我們可以大致瞭解到取值方式差不多有6種:
1. absolute絕對定位方式
2. fixed相對瀏覽器顯示區定位方式
3. inherit繼承父容器的定位方式
4. relative相對父級容器定位方式
5. static預設的定位方式,另稱“無定位”
6. !important層疊樣式表級聯(可用來提升Class優先順序)
我們主要關注於其中的3個:absolute、fixed、relative
二、我們看一下具體說明:
- absolute
- fixed:相對瀏覽器的顯示區域定位。功能有點類似漂浮廣告,例如設定“left”屬性值為“20px”則,滾動條向右滾動時,元素和瀏覽器顯示區域的左邊距一直固定為20畫素,會跟隨著滾動條自動向右移動;
- relative:相對於父容器定位(相對定位)。可通過“top”、“left”、“right”、“bottom”屬性設定其在容器中的相對位置,相對於父容器的左邊,相對於父容
- static:無定位。預設的佈局方式,如果元素的position屬性設定為“static”,則元素將不接受任何“top”、“left”、“right”、“bottom”屬性的值。
三、按照排序我們看一下應用例項:
absolute
CSS程式碼:
#contianer{ /* 父容器*/ background:#0F0; position:absolute; top:30px; left:50px; } #sidebar{ position: absolute; background: #F00; height: 80px; width: 200px; left: 9px; /* 設定sidebar層對於body元素的做邊距,可以認為是 X座標 */ top: 60px; /* 設定sidebar層對於body元素的上邊距,可看作 Y 座標,負 Y 座標*/ }
HTML程式碼:
<BODY>
<div id="contianer">
外部容器
<div id="sidebar">
內部容器絕對佈局
</div>
</div>
</BODY>
deamweaver中的效果,可直接調整位置和大小
從圖中我們可以看出,內部紅色的層並沒有根據它的父容器(綠色的層)而改變位置。得出結論,應用了absolute 絕對佈局的元素除 body 元素外不再有父容器,完全漂浮於空中。在Dreamweaver裡面這個層已經能夠用滑鼠拖著到處擺放了,可以擺放到任何地方,並且可以像PowerPoint內的形狀那樣改變大小
relative
CSS程式碼:
#contianer{
background:#0F0;
position:relative;
top:30px; /* 父容器 Container 相對於 body元素的頂端間距設定為30個畫素 */
left:50px; /* 父容器 Container 相對於body元素的左邊間距設定為50個畫素 */
}
#sidebar{
position: relative;
background: #F00;
height: 80px;
width: 200px;
left: 50px; /* 子元素 sidebar 相對於父容器 Container 左邊的間距設定為 50個畫素 */
top: 30px; /* 子元素 sidebar 相對於父容器 Container 頂端的間距設定為 30個畫素 */
}
HTML 程式碼:
<BODY>
<div id="contianer">
<div id="sidebar">
相對瀏覽器顯示區佈局
</div>
</div>
</BODY>
fixed
CSS程式碼:
#sidebar{
position: fixed;
background: #F00;
height: 80px;
width: 200px;
right: 50px; /* 相對於瀏覽器顯示區又邊緣的固定距離 */
top: 30px; /* 相對於瀏覽器顯示區上邊緣的固定距離 */
}
HTML程式碼:
<BODY>
<div id="sidebar">
相對瀏覽器顯示區佈局
</div>
<img src="cream.jpg" alt="wallpaper">
</BODY>
滾動條向下滾動之後
當滾動條向下滾動的時候,DIV元素會跟著滾動條滾動,樣式中設定的相對與瀏覽器顯示區的距離不會改變,很類似滾動廣告。
以上就是常用的 postion 屬性取值的效果。中間如有誤解,還請指出,第一次寫博文,考慮不周之處望大家見諒