transform 遇上 position: fixed

最近遇到一个有意思的现象，以下 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 的表现就说不过去了。为什么呢?。谷歌一下，原来是父元素的 transform 在捣乱。

再看看 w3c 对 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 属性使元素创建了**新的 BFC，所有**的子元素都被包含在这个新的 BFC 内。那么设置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。

BFC 和定位有什么关系呢，继续翻 w3c，有段关于 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.

元素的位置和尺寸是相对于一个确定的 BFC 计算的。

所以 demo 展示的 fixed 元素位置是根据它所在的 BFC 计算的。

转载于:https://www.cnblogs.com/xxhuan/p/11030244.html

transform 遇上 position: fixed相关推荐

position fixed 在ios上滚动不固定问题
今天项目上用position: fixed时,谷歌浏览器没有问题,但是到ios上就出现了滚动时position: fixed跟动着滚动的问题.怎么解决呢在position: fixed元素上添加下面 ...
transform限制position:fixed的跟随效果
我们应该都知道,position:fixed可以让元素不跟随浏览器的滚动条滚动,而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了.但是,真是一物降一物,pos ...
ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
不要乱用position:fixed
经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要 ...
ios position: fixed 问题
为了解决卡顿的问题, 添加了如下代码 -webkit-overflow-scrolling: touch; 但是在ios上发现,利用fixed进行底部固定,出现bug 具体现象是: 在我滚动的时候,原 ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
移动Web开发实践——解决position:fixed自适应BUG
在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章<移动端web页面使用position:fixed问题总结>中已经总结了很多bug,但是在后续的开发中有关f ...
position:fixed和scroll实现div浮动【示例】
原文:position:fixed和scroll实现div浮动[示例] 前言在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解 ...
实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...

transform 遇上 position: fixed

transform 遇上 position: fixed相关推荐

最新文章

热门文章