transform 遇上 position: fixed
最近遇到一個(gè)有意思的現(xiàn)象，以下 demo 中 fixed 的元素沒(méi)有相對(duì) viewport 定位，而是相對(duì)于它的父元素進(jìn)行定位。
<html><head><style>.parent {width: 200px;height: 300px;background: yellow;transform: scale(1);}.fixed {position: fixed;left: 0;right: 0;bottom: 0;background: red;}</style></head><body><div class='parent'>parent<div class='fixed'>fixed</div></div></body> </html>
?
在 w3c 中對(duì) position: fixed 的[定義](https://www.w3.org/TR/css-position/#fixed-pos)如下：
Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.大概意思就是，fixed 元素的塊級(jí)格式上下文 Block Formatting Context（BFC） 由 viewport 創(chuàng)建，也就是fixed 元素的 BFC 包含在根元素的 BFC 里。
那以上 demo 的表現(xiàn)就說(shuō)不過(guò)去了。為什么呢?。谷歌一下，原來(lái)是父元素的 transform 在搗亂。
再看看 w3c 對(duì) transform 的[定義]()：
For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.
大概意思就是，transform 屬性使元素創(chuàng)建了**新的 BFC，所有**的子元素都被包含在這個(gè)新的 BFC 內(nèi)。那么設(shè)置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。
BFC 和定位有什么關(guān)系呢，繼續(xù)翻 w3c，有段關(guān)于 BFC 的[定義](https://www.w3.org/TR/css-position/#def-cb)：
?
The position and size of an element’s box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element.
元素的位置和尺寸是相對(duì)于一個(gè)確定的 BFC 計(jì)算的。
所以 demo 展示的 fixed 元素位置是根據(jù)它所在的 BFC 計(jì)算的。
轉(zhuǎn)載于:https://www.cnblogs.com/xxhuan/p/11030244.html
總結(jié)
以上是生活随笔為你收集整理的transform 遇上 position: fixed的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 01 java 编程基础
- 下一篇： Java基础学习总结（7）——Objec