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

Question

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

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

Answer 1

图示的作者是不是对堆叠上下文(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 干不应该干的事。

Answer 2

相对父定位需要position fixed？？搞事情啊

Answer 3

前面的同学说的都有道理，fixed定位被滥用了。

应该这样就可以了吧：

1. 父元素设置position：relative

2. 子元素设置position：absolute

再细看题主，原来是问为什么。
感觉这些非标准的CSS方案，刚好表现为这样，真的要看浏览器实现代码了。
也许在某个版本升级的时候这些设置都失效了，这些知识点应该是知道尽量避免就好，细究为何会这样的话，也许是某个程序员的bug啊 ヾ(｡>﹏<｡)ﾉﾞ✧*。

Answer 4

题主是想问有滚动条的div内部元素相对于父元素定位的问题吗？
如果是，可以参考这篇文章
https://hellohy.github.io/201...
demo:
https://codepen.io/hellohy/pe...

Answer 5

transform会对定位产生副作用，建议尽量避免一起使用。

话说都已经有了相对父元素的绝对定位absolute，为何还要再造个轮子？

Answer 6

问题是无意中会遇到,fixed相对父元素定位，得知道怎么改回来呀

Answer 7

会有遇到这种情况的，比如父盒子是滚动的，子盒子就是要定在父盒子的 bottom:0的时候

Answer 8

脱离党指导路线的都不是什么好路子~