positionfixed的相对容器是什么

时间：2023-03-30 15:52:06 CSS

请使用chrome浏览器输入示例代码！很长一段时间，我和一些同学都理解position:fixed在css中就是元素相对于屏幕视口的定位。但不是，下面摘录自[MDN](https://developer.mozilla.org...:position:fixed并没有为元素预留空间，而是通过指定元素相对于屏幕视口的位置（viewport)指定元素的位置，当屏幕滚动时，元素的位置不会改变，打印时，元素会出现在每个页面的固定位置，fixed属性会创建一个新的堆叠上下文。当元素ancestor的当transform属性不为none时，容器从viewport变成了ancestor，什么意思呢？我们用一个例子来表达一下。下面例子是元素相对于body的定位：我是固定元素

我是另一个元素

body{height:2000px;}.son{position:fixed;left:100px;top:100px;width:100px;height:100px;background:#f00;}.other{height:1000px;}本例中，body的滚动条滚动后，子元素的位置是相对于屏幕视口的位置。根据MDN的说明，更改css部分代码，添加父元素样式：.parent{margin-top:100px;高度：500px；溢出-y：自动；背景：#ff0；transform:translate(0,0);}这时候你会发现滚动body的滚动条时，子元素是跟着父元素的。但是，当滚动父级的滚动条时，子元素并没有像想象中那样固定在父容器中的某个位置，而是具有绝对的作用。（所以我们做不了我们心爱的天花板效果）。看完整个例子，我可以总结一句话：这不是蛋疼吗？既然fixed在transform中成为了绝对行为，为什么transform要影响fixed呢？引用：https://developer.mozilla.org...http://www.zhangxinxu.com/wor...