css的position屬性（web作業）
阿新 • • 發佈：2018-11-12
position屬性
定義和用法
position 屬性規定元素的定位型別。
說明
這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
具體事例：
html程式碼：
<!DOCTYPE html> <html> <head> <title>position</title> <link rel="stylesheet" type="text/css" href="position.css"> </head> <body> <div class="box" id="box1">One</div> <div class="box" id="box2">Twe</div> <div class="box" id="box3">Three</div> <div class="box" id="box4">Four</div> </body> </html>
css程式碼：
.box{ display: inline-block; /*display: inline;*/ /*display: block;*/ /* block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 inline 此元素會被顯示為內聯元素，元素前後沒有換行符。 inline-block 行內塊元素。 */ background: red; width: 200px; height: 200px; color: rgb(255,255,255); } #box3{ left: 30px; top: 30px; background: blue; }
在未加position屬性前執行結果：
可見按照正常顯示
加上：position：value；
value=
-
absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
結果：
-
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
為了證明該元素是相對於瀏覽器進行定位，我們加上了幾段文字，而“Three”的位置卻沒有改變。 -
relative
生成相對定位的元素，相對於其正常位置進行定位。
-
static
預設值。沒有定位，元素出現在正常的流中 -
inherit
規定應該從父元素繼承 position 屬性的值。
