css樣式佈局之position屬性的用法（附程式碼）
- 不言原創
- 2018-08-21 13:48:431715瀏覽
這篇文章帶給大家的內容是關於css樣式佈局之position屬性的用法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
position屬性：用於定義建立元素佈局所使用的定位類型，該屬性有多個值：
|
值 |
描述 |
|
#static |
預設值.沒有定位，元素出現在正常流中（忽略 top, bottom, left, right 或 z-index 宣告）。 |
|
#relative |
產生相對定位的標籤，相對於標籤原來位置進行定位。因此，「left:20」 會在標籤的left位置新增 20 像素。 |
#absolute |
#產生相對定位的標籤，相對於標籤本身第一個position為非 static父元素進行定位。標籤的位置透過 “left”, “top”, “right” 以及 “bottom” 樣式屬性進行規定。如果該標籤所在的父標籤都沒有設定position為非 static，則相對於瀏覽器視窗進行定位，但此時元素會隨著捲動調的滑動而滑動。 |
#fixed |
#產生絕對定位的標籤，相對於瀏覽器視窗進行定位，此時元素不會隨著捲動調的滑動而滑動。元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
（文件流又稱正常流，是預設情況下HTML元素排版佈局過程中元素會自動依照自上而下或從左往右進行流式排放的一種順序）
注意：任何元素都可以定位，但absolute或fixed元素會產生一個區塊級框，不論該元素本身是不是區塊級框。 relative元素會相對於它在正常流中的預設位置偏移。 IE瀏覽器都不支援"inherit"屬性值 。
當一個標籤使用了position CSS樣式屬性，如果其樣式屬性值為非static（不考慮inherit）則該標籤將脫離正常文檔流，如果又沒有指定「left」, “top”, “right” 以及“bottom” 樣式屬性的屬性值，則該標籤只待在原來位置，但已經脫離正常文檔流
下為演示代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#z{
width: 300px;
height: 300px;
border: 1px solid royalblue;
position: relative;
}
#a,#b,#c{
width: 100px;
height: 100px;
}
#a{
background: red;
position: relative;
right: 10px;
}
#b{
background: green;
position: fixed;
left: 1000px;
bottom: 20px; /*只需要规定两个方向就可以了，上下，左右各选其一*/
}
#c{
background: yellow;
position: absolute;
left: 10px;
bottom: 3px;
}
</style>
</head>
<body>
<div id="z">
<div id="a"></div>
<div id="b"></div>
//加空格用于复习div的块级元素性质
<div id="c"></div>
//加了空格后，c的div会自动换行 block的属性所致
</div>
</body>
</html>演示註釋：
position中：
relative 是相對於標籤原來的位置點進行定位的 仍存在於文件流中
fixed 是相對於整個瀏覽器來定位的 直接無視瀏覽器裡面的標籤元素類似於「浮起來」了
absolute是相對於上一層[如. b對z]第一個（父）元素（要求為非static屬性）來定位的 且定位標準是依據父元素的外界邊框來決定的
#下為示範結果：
css background-position屬性_html/css_WEB-ITnose
CSS的position屬性_html/css_WEB-ITnose#
以上是css樣式佈局之position屬性的用法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！