fixed 元素必定是相對視口定位的嗎？

時間 2020-01-15

原文原文鏈接

引言

fixed 元素必定是相對視口定位的嗎？不必定。舉一個例子，若是父元素 transform: scale(1) 了，子元素是 position: fixed。會發現，子元素是相對這個父元素定位的。css

包含塊

其實上面這個問題，牽扯到了包含塊（containing block）的概念。那麼，包含塊是用來幹嗎的呢？html

簡單說來，一個元素的尺寸（好比 width、height、padding 啥的）或者定位（好比定位元素的 left、top 屬性啥的）一般都是參照它的包含塊計算的。能夠這麼說，在咱們平常的 CSS 的使用中，凡是涉及到與佈局相關的代碼，幾乎都在與包含塊打交道。瀏覽器

學習包含塊以前，能夠先記住如下兩點：ide

一個元素的包含塊一般是該元素的祖先元素。
一個元素的包含塊爲什麼，只與這個元素的 position 屬性值有關。

好了，下面就開始學習了。佈局

元素默認的包含塊

position 屬性默認值是 static，或者咱們隨便寫個元素，使用 getComputedStyle 也能知道。post

<div id="test"></div>
<script>getComputedStyle(test).position // "static"</script>
複製代碼

那麼對於 position:static 元素，它的包含塊是啥呢？下面給出了範圍：學習

最近的祖先元素，且是一個塊元素（block container，好比 display 值爲 inline-block、block、list-item 的這些元素）。或，
最近的祖先元素，且能建立 BFC 上文下環境的元素（好比 <table> 元素，Flex 容器，Grid 容器，或是塊元素自己）。還有，
position: static 元素是參照上述祖先元素的內容區域（content box）計算尺寸或定位的。

這裏有兩個地方，須要解釋一下：ui

1、第二條括號裏的內容，「塊狀元素自己」，是什麼意思呢？spa

這是說，有些塊元素自己就具有建立 BFC 上文下環境能力。好比，inline-block 元素，它既是塊元素也能建立 BFC 上下文。code

2、相對於 content box 區域計算又是什麼意思?

舉一個例子：

<div class="parent">
	<div class="child"></div>
</div>

<style> .parent { width: 400px; height: 200px; padding: 50px; } .child { width: 50%; height: 50%; } </style>
複製代碼

有上面可知，.parent 的內容區域尺寸爲：400px × 200px 的（注意，沒有包括 padding 部分）。

參照上面的規則，咱們可知道 .child 的包含塊就是 .parent，所以 .child 的 width、height 的百分值就是相對於 400px × 200px 來計算的。因此，.child 的 width、height 值分別就是 200px 和 100px。

另外，position 值爲 relative 和 sticky 的元素的包含塊規則與默認狀況（static）是同樣的。

定位元素

postion 值爲 absolute 或 fixed 的元素稱爲「定位元素」。它們之間的的包含塊規則有不一樣也有相同的地方。相似於下面這樣：

我們先講不一樣的地方。

各自的規則

absolute 元素

absolute 元素的包含塊規則：

最近的 position 值爲 fixed、absolute、relative 或 sticky 的祖先元素（即 position 值不爲 static）。
是相對於上述祖先元素的 padding 區域（padding box）定位的。

fixed 元素

fixed 元素的包含塊規則：

相對於視口（viewport）定位的。

都有的規則

absolute 或 fixed 元素還有共有的包含塊規則。知足下列條件之一的祖先元素，也是它們的包含塊（相對於 padding 區域）。

transform 的屬性值不爲 none。
perspective 的屬性值不爲 none。
will-change 的屬性值爲 transform 或 perspective；還有在屬性值爲 filter 的時候，不過僅在 Firefox 瀏覽器中有效。
filter 屬性值不爲 none。
contain 的屬性值爲 paint，即 contain: paint。

經過上面所列的規則，我發現一件有趣的事情。

fixed 元素必定是相對視口定位的嗎？

要是在以前，我是這麼認爲的。要相對視口定位嗎？好的，position: fixed 一下吧。所以，也給我形成一種錯覺的，就是 fixed 元素就是相對視口定位的。

經過上面的學習，咱們知道這並不必定。fixed 元素本質是相對於它的包含塊定位的。就是說，若是也能知足上面所列的六條規則之一，也會成爲 fixed 元素的包含塊。

下面舉一個例子：

fixed 元素被包在了一個 transform: scale(1) 元素裏。咱們來來看看結果（demo 地址）：

能夠看見，fixed 元素被鉗制在了 transform: scale(1) 的容器元素裏！因此下次千萬別想固然的認爲 fixed 元素就必定是相對視口定位的。要看具體狀況的。

初始包含塊

初始包含塊（initial containing block）並非根（<html>）元素。初始包含塊是指根元素所在的包含塊，而且初始包含塊具備與視口相同的尺寸。

（正文完）

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個貓奴而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。