文章將陸續整理並更新至個人部落格。
position: static | relative | absolute | fixed | sticky
接下來將逐一介紹屬性值的意義。
position: static;
預設
的 position 值。
元素在文檔流
內(in-flow)。
top
、right
、bottom
與 left
屬性皆無效
。
z-index
屬性無效
。
註:<html> 的 position 為 static。
position: relative;
元素仍在文檔流
內(in-flow),仍為元素預留原本的空間
。
top
、right
、bottom
與 left
屬性可指定元素相對於自身原本的位置
做偏移。
不影響
其他元素的偏移。
此屬性值對 display 值為 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、 table-column、table-cell 與 table-caption 的元素無效。
position: absolute;
不為
元素預留原本的空間。相對於祖譜中最接近
且 position
值非 static
的containing block(包含塊)
做定位,若無
,則追溯至 initial containing block (初始包含塊),在連續媒體下即為 veiwport (視口)。
top、right、bottom 與 left 屬性可指定其對於containing block(包含塊)
的偏移量。
不會
與其他元素發生 margin collapsing(外距重疊)
,因為會建立一個新的 BFC。
建立 Block Formatting Context(BFC)
。
position: fixed;
不為
元素預留原本的空間。containing block(包含塊)
為 veiwport
,所以會針對 veiwport 做定位,滾動時,元素相對於 viewport 仍處於同一位置。
若上層元素中有 transform
屬性非 none
的祖先時,containing block
由 veiwport 改為該祖先
,即針對該祖先定位。
top
、right
、bottom
與 left
屬性可指定其對於containing block
的偏移量。
不會
與其他元素發生外距重疊
(margin collapsing)。
建立Block Formatting Context(BFC)
。
為相對定位(relative)和固定定位(fixed)的混合體。元素在跨越
特定門檻(specified threshold)
之前屬於相對定位,之後屬於固定定位。
position: sticky;
元素為 in-flow。
必須指定 top、right、bottom 或 left 其中一個做為特定門檻(specified threshold)
,sticky 才有效,即使是 top: 0
。
相對於最近的可滾動祖先和 containing block 做定位。
top
、right
、bottom
與 left
屬性可指定其偏移量,不影響其他元素的位置。
建立 Block Formatting Context(BFC)
。
例如:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.container{
width: 280px;
height: 1850px; /* 可滾動 */
}
.box{
position: sticky;
top: 150px; /* 門檻值(必要條件) */
width: 70px;
height: 70px;
margin-bottom: 100px;
}
position 屬性的介紹就到這邊囉!
W3C-hoosing a positioning scheme: 'position' property
MDN-position
MDN-Block formatting context