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：絕對定位。可通過“top”、“left”、“right”、“bottom”屬性設定其在頁面中的位置，類似座標定位。且應用了“absolute”的元素會漂浮到其他未應用“absolute”、“float”等屬性的元素之上，並且可以相互交疊；
- 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個畫素 */
}<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 屬性取值的效果。中間如有誤解，還請指出，第一次寫博文，考慮不周之處望大家見諒