iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
2
自我挑戰組

前端新手進化史系列 第 16

position

文章將陸續整理並更新至個人部落格


position 語法

position: static | relative | absolute | fixed | sticky

接下來將逐一介紹屬性值的意義。

static

position: static;
  • 預設的 position 值。

  • 元素在文檔流內(in-flow)。

  • toprightbottomleft 屬性皆無效

  • z-index 屬性無效

註:<html> 的 position 為 static。


relative

position: relative;
  • 元素仍在文檔流內(in-flow),仍為元素預留原本的空間

  • toprightbottomleft 屬性可指定元素相對於自身原本的位置做偏移。

  • 不影響其他元素的偏移。

  • 此屬性值對 display 值為 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、 table-column、table-cell 與 table-caption 的元素無效。



absolute

position: absolute;

  • 元素 out-of-flow,不為元素預留原本的空間。

  • 相對於祖譜中最接近position非 staticcontaining block(包含塊)做定位,若無,則追溯至 initial containing block (初始包含塊),在連續媒體下即為 veiwport (視口)。

  • top、right、bottom 與 left 屬性可指定其對於containing block(包含塊)的偏移量。

  • 不會與其他元素發生 margin collapsing(外距重疊),因為會建立一個新的 BFC。

  • 建立 Block Formatting Context(BFC)



fixed

position: fixed;

  • 元素 out-of-flow,不為元素預留原本的空間。

  • containing block(包含塊)veiwport,所以會針對 veiwport 做定位,滾動時,元素相對於 viewport 仍處於同一位置。

  • 若上層元素中有 transform 屬性非 none的祖先時,containing block由 veiwport 改為該祖先,即針對該祖先定位。

  • toprightbottomleft 屬性可指定其對於containing block的偏移量。

  • 不會與其他元素發生外距重疊(margin collapsing)。

  • 建立Block Formatting Context(BFC)



sticky

為相對定位(relative)和固定定位(fixed)的混合體。元素在跨越特定門檻(specified threshold)之前屬於相對定位,之後屬於固定定位。

position: sticky;
  • 元素為 in-flow。

  • 必須指定 top、right、bottom 或 left 其中一個做為特定門檻(specified threshold),sticky 才有效,即使是 top: 0

  • 相對於最近的可滾動祖先和 containing block 做定位。

  • toprightbottomleft 屬性可指定其偏移量,不影響其他元素的位置。

  • 建立 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


上一篇
視覺格式化模型-Box generation(下)
下一篇
視覺格式化模型-格式化上下文
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言