transform 遇上 position: fixed
阿新 • • 發佈：2019-06-16
最近遇到一個有意思的現象，以下 demo 中 fixed 的元素沒有相對 viewport 定位，而是相對於它的父元素進行定位。
<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 中對 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 元素的塊級格式上下文 Block Formatting Context（BFC） 由 viewport 建立，也就是fixed 元素的 BFC 包含在根元素的 BFC 裡。
那以上 demo 的表現就說不過去了。為什麼呢