CSS布局學習（三） - position屬性定義及解釋(官網直譯)
阿新 • • 發佈：2018-11-15
mage http docs stand 屏幕 保留 gin 技術 地址
static
①元素的位置是在文檔正常布局流中的位置。
②設置top right bottom left與z-index無效。
③在未指定position時，static是默認值
以下例子進行說明：
.default{ width: 100px; height: 100px; background-color: salmon; top: 20px; left: 20px; } .static{ width: 100px; height: 100px; background-color: yellowgreen; top: 20px; left: 20px; }
<body> <div class="default">default</div> <div class="static">static-1</div> <div class="static">static-2</div> </body>
運行結果：
結果說明：
- 元素static-1 static-2的位置都是文檔正常布局流中的位置，與①符合
- 元素static-1 static-2的位置都未發生偏移，與②符合
- default元素與static-1 static-2的表現一致，與③符合
relative (相對定位)
① 元素先放置在未添加定位時的位置（即文檔正常布局流中的位置），然後在不改變頁面布局的情況下，依據元素的top right bottom left重新調整元素位置。
② 它的偏移量對其它元素定位均不會產生影響，也就是是說，元素在頁面布局中所占的空間是不變的，這一點與postion值是static的情況是相同的
下面的例子說明以上兩點
.static{ width: 100px; height: 100px; background-color: salmon; top: 20px; left: 20px; } .relative{ position: relative; width: 100px; height: 100px; background-color: yellowgreen; top: 20px; left: 20px; }
<body> <div class="static">static-1</div> <div class="relative">relative-1</div> <div class="static">static-2</div> </body>
運行結果
結果說明：
- 根據文檔常規流位置，relative-1首先被放置在static-1下面，然後根據top left屬性向下向右各偏移20px，這與①中的定義相符合
- static-2的位置不受relative-1偏移量的影響，顯示在它不發生偏移的位置正下方，即圖中紅色圈圈的正下方，這與②中的定義相符合
PS：當z-index的值不為auto時，這個值會創建一個層疊上下文。position:relative對table-*-group, table-row, table-column, table-cell, and table-caption元素無效
absolute（絕對定位）
① 元素脫離文檔常規布局流不受其影響，頁面布局不為該元素預留空間。
以下例子進行說明
.relative { position: relative; width: 200px; height: 200px; background-color: yellowgreen; } .static { width: 150px; height: 150px; background-color: lightskyblue; } .absolute { width: 100px; height: 100px; background-color: salmon; top: 50px; left: 50px; position: absolute; }
<body> <div class="relative"> relative-ancestor <div class="static"> static-parent <div class="absolute">absolute</div> </div> </div> </body>
結果說明：如果按照文檔布局流，元素absolute應該再圖中元素default-2的位置，但是其實際結果位於default-1，default-2之上，且default-2位置不受absolute的影響，與①中定義相符合
② 如果有非static的祖先元素，可以通過相對於祖先元素的偏移量來確定元素位置；如果沒有，它會相對於初始包含塊進行偏移，偏移量由 top right bottom left來指定
以下例子進行說明：
.static { width: 200px; height: 200px; background-color: yellowgreen; } .relative { position: relative; width: 200px; height: 200px; background-color: yellowgreen; } .absolute { width: 100px; height: 100px; background-color: salmon; top: 50px; left: 50px; position: absolute; }
<body> <div class="relative"> relative-ancestor <div class="static"> static-parent <div class="absolute">absolute</div> </div> </div> </body>
運行結果一：
修改html代碼
<body> <div class="absolute">absolute</div> </div> </body>
運行結果二
結果說明：
- 運行結果一：absolute元素最近的父元素為static-parent，但是並沒有相對於static-parent進行向下向右各50px的偏移，說明absolute元素的位置不受static父級元素影響。absolute元素實際是相對於relative-ancestor進行偏移的
- 運行結果二：在沒有非static的父級元素時，absolute元素會相對於初始包含塊進行偏移，此處的初始包含塊為窗口視口還是瀏覽器窗口？
③ 當z-index的值不為auto時，這個值會創建一個層疊上下文。
④ 絕對定位元素的外邊距與其他元素的外邊距不會合並
例子如下：
.relative { position: relative; width: 100px; height: 100px; background-color: yellowgreen; margin-bottom: 20px; margin-top: 20px; }
<body> <div class="relative">relative-1</div> <div class="relative">relative-2</div> </body>
運行結果一
修改代碼
.relative { position: relative; width: 100px; height: 100px; background-color: yellowgreen; margin-bottom: 20px; margin-top: 20px; } .absolute { width: 100px; height: 100px; background-color: salmon; top: 100px; left: 100px; position: absolute; margin-bottom: 20px; margin-top: 20px; }
運行結果二
結果說明：
- 結果一中的relative-1的margin-bottom的bottom外邊距與relative-2的top外邊距合並，變為20px。
- 結果二中absolute元素向下偏移了120px=top+margin-top，向右偏移了100px=left，外邊距是相對於初始包含塊的，與同級的relative沒有相互影響
大多數情況下，height和width都設定為auto的絕對定位元素，按其內容大小調整尺寸。但是被絕對定位的元素可以通過指定top，bottom，保留height（即auto）來填充可以用的垂直空間。同樣也可以通過指定left，right並將width指定為auto來填充可用的水平空間
- 如果top與bottom同時被指定（具體值而不是auto），top生效
- 如果left與right同時被指定，direction為ltr的情況下，left生效（direction為rtl時，right生效）
fixed（固定定位）
① 元素脫離文檔常規布局流不受其影響，頁面布局不為該元素預留空間。（與absolute元素一樣，此處不做說明）
② 元素是相對於瀏覽器屏幕視口（viewport）進行定位的，偏移量由top right bottom left決定，元素的位置在窗口滾動時不會變化，這意味著可以用其創建固定的UI項目，如持久導航菜單。
例子如下
.relative { position: relative; width: 1000px; height: 1000px; background-color: yellowgreen; } .fixed { position: fixed; width: 150px; height: 150px; background-color: lightskyblue; top: 20px; left: 20px; }
<body> <div class="relative"> relative-parent <div class="fixed">fixed</div> </div> </body>
運行結果
③ 當固定定位元素的祖先元素的transform， perspective或者filter屬性設置為none時，它就相對於這個祖先元素進行定位（改變了②中的規則）
例子如下：
.relative { position: relative; width: 200px; height: 200px; background-color: yellowgreen; transform: rotate(7deg); } .fixed { position: fixed; width: 50px; height: 50px; background-color: lightskyblue; top: 20px; left: 20px; }
<body> <div class="relative"> relative-parent <div class="fixed">fixed</div> </div> </body>
運行結果
結果說明 ：與③中的說明符合
④ 打印時，元素會出現在每頁固定的位置（土豪可以自行打印測試）
sticky（粘性定位）
① 元素首先放置在文檔正常布局流中指定的位置，然後相對於最近的塊級祖先(containing block)進行偏移，偏移量由top right bottom left屬性決定。
② 元素的位置偏移量不會對其他元素造成影響
以下是例子：
.relative1 { position: relative; width: 200px; height: 200px; background-color: yellowgreen; } .sticky { position: sticky; width: 100px; height: 100px; background-color: lightskyblue; /*left: 50px;*/ /*top: 50px;*/ } .relative2 { position: relative; width: 100px; height: 100px; background-color: salmon; top:50px; left: 50px; }
<body> <div class="relative1"> relative1 <div class="sticky">sticky</div> <div class="relative2">relative2</div> </div> </body>
運行結果一
修改css代碼，註釋取消。html保持不變
.relative1 { position: relative; width: 200px; height: 200px; background-color: yellowgreen; } .sticky { position: sticky; width: 100px; height: 100px; background-color: lightskyblue; left: 50px; top: 50px; } .relative2 { position: relative; width: 100px; height: 100px; background-color: salmon; top:50px; left: 50px; }
運行結果二
結果說明
- 運行結果一，在未設置偏移量的時候，元素sticky的位置為正常文檔布局流中的位置。與①前半部分相符合
- 運行結果二，設置偏移量後，元素相對於relative1進行向下向右各50px的偏移，與①後半部分相符合
- 而運行結果一與結果二中，即sticky元素設置與不設置偏移量都對relative2位置沒有影響，與②後半部分符合
官網文檔地址
CSS布局學習（三） - position屬性定義及解釋(官網直譯)