Position定位詳解

不知名前端李小白發表於2021-12-18

Position

 CSS position屬性用於指定一個元素在文件中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

在分析position元素定位之前，先來說說什麼是文件流？（自我理解）

瀏覽器在預設情況下規定一個塊元素在父元素內排列規則：

  1. 元素從上到下、從左到右排列
  2. 一個塊級元素獨佔一行
  3. 行內元素不會獨佔一行
  4.  浮動元素在一行排不下則換行繼續浮動

position 屬性的五個值：

  • static
  • relative
  • absolute
  • fixed
  • sticky

一、static(預設值)

 該關鍵字指定元素使用 正常 的佈局行為，即元素在文件常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

二、relative

relative：相對定位

 該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面佈局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效 。

 語法：

div{
    position:relative;
}

特點：

1. 參照相對沒有定位前的自己

2. 有層級，後來居上-- 層級高

3. 佔據自己原來的位置--在原來的文件流當中存在自己的位置

4. 不會改變元素的特徵，行內還是行內，塊級還是塊級

5. 支援margin、padding、margin：auto

6. 不脫離文件流

三、absolute

absolute：絕對定位

元素會被移出正常文件流（脫離文件流），並不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併。

語法：

div{
  position:absolute
}

特點：

1. 脫離文件流

2. 提升層級不佔原來的位置，後來者居上

3. 不支援margin：auto，支援margin

4. 參照物：預設參照body，絕對定位的元素位置相對於最近的 已定位 的祖先元素

5. 行內元素支援寬高，塊級元素內容撐開寬高改變元素特性

6. 一般配合相對定位使用-- 父相子絕 

四、fixed

fixed：固定定位

元素會被移出正常文件流，並不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。

語法：

div{
  position:fixed  
}

特點：

1.參照物：相對 瀏覽器視窗 定位！

2.脫離文件流，提升層級

3.不支援margin：auto

4.可以改變元素特性，行內->塊級

五、sticky

sticky：粘性定位（基於使用者的滾動位置來定位）

元素根據正常文件流進行定位，然後相對它的最近滾動祖先包括table-related元素，基於top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其他元素的位置。

粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換，表現為在跨越特定閾值前為相對定位，之後為固定定位。

注意：只有指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

語法：

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

---層級關係(z-index)

因為元素的定位與文件流無關，所以它們可以覆蓋頁面上的其它元素，這裡 z-index 屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）

  1. z-index--可以調換兩個層的上下位置關係

  2. 值可為正也可為 負 ，值越大越在上面，預設為0

  3. 只能 同級元素對比

  4. z-index 只對 定位的元素有效，其他元素均無效

{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1; /* 置於底層 */
}

 

參考文件：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 

https://www.runoob.com/css/css-positioning.html

 

相關文章