position

11th鐵人賽 css web 好想工作室 position

yachen

團隊好想工作室 v3.0

2019-10-01 20:41:32

2036 瀏覽

分享至

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

position 語法

position: static | relative | absolute | fixed | sticky

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

static

position: static;

預設的 position 值。
元素在文檔流內(in-flow)。
top、right、bottom 與 left 屬性皆無效。
z-index 屬性無效。

註：<html> 的 position 為 static。

relative

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 的元素無效。

absolute

position: absolute;

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

相對於祖譜中最接近且 position 值非 static 的containing 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 改為該祖先，即針對該祖先定位。
top、right、bottom 與 left 屬性可指定其對於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 做定位。
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;
}