css - 怎么让position:fixed相对于父元素定位

问题描述

问 题

如图所示，说按照上面的设置，就能让position:fixed相对于父元素定位，而不再是视口。我试了下，只有给父元素设置transform生效了，子元素设置了固定定位，确实是相对于父元素定位了。但是其他的方法，都不生效，求大神解惑一二

PS:谢谢大家的热心解答。我也知道这样做不好，就是想知道为啥，嘿嘿！

解决方案

图示的作者是不是对堆叠上下文(stacking context)有什么误解……

定位依据的是 containing block，position fixed 的 containing block 是 viewport 宣布的

for a fixed positioned box, the containing block is established by the viewport.

https://www.w3.org/TR/CSS22/v...

transform 是因为其特殊性影响了 fixed 的 containing block

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

https://www.w3.org/TR/css-tra...

想让 position:fixed 的元素相对于父元素定位，应该改成 absolute 以及父元素 relative。而不是让 fixed 干不应该干的事。

这篇关于css - 怎么让position:fixed相对于父元素定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！