当将具有position:fixed的元素嵌套在彼此内部时会发生什么？
好吧，我注意到了一些东西，但在 CSS 规范中找不到它。使用 position:fixed 设计元素将相对于浏览器视口进行绝对定位。如果将一个固定位置元素放入另一个元素中会发生什么？
CSS 示例如下：
.fixed {
position: fixed;
width: 100px;
height: 100px;
background: red;
}
#parent {
right 100px;
padding: 40px;
}
.fixed .fixed {
background: blue;
}<div id="parent" class="fixed">
<div class="fixed"> </div>
</div>据我所知，该元素相对于其最近的父元素是固定位置的，该父元素也是固定位置的。这在所有浏览器中都可以观察到吗？另外，这是一个错误，还是故意行为？
到目前为止，我还没有找到有关此主题的任何内容，只是“固定位置使其粘在页面上”。
Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with position: fixed will position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another?
Example CSS along the lines of:
.fixed {
position: fixed;
width: 100px;
height: 100px;
background: red;
}
#parent {
right 100px;
padding: 40px;
}
.fixed .fixed {
background: blue;
}<div id="parent" class="fixed">
<div class="fixed"> </div>
</div>As far as I can tell, the element is fixed-positioned with respect to its nearest parent that's also fixed-positioned. Is this observable in all browsers; also, is it a bug, or intentional behaviour?
So far I've not found anything on this topic, just 'fixed position makes it stick to the page'.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
固定和定位是两个独立的事情。它们的定位与绝对定位元素相同：相对于它们的 包含块。但与绝对定位的元素相比，它们相对于视口保持固定在该位置（即它们在滚动时不会移动）：
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
定位
包含块的定义说：
并且
这表明虽然它们的定位算法是相同（它们都相对于其包含块定位），固定元素的包含块始终是视口，与绝对定位的元素相反，因此它们应该相对于 that 定位，而不是相对于任何绝对或固定位置的元素。
而事实上，情况确实如此。例如，如果将
top: 20px添加到.fixed，则两个 div 都将定位在距视口顶部 20 像素的位置。嵌套的固定 div 不会定位在距其父级顶部向下 20 像素的位置。在这种情况下您没有看到的原因是因为您实际上没有设置任何 left/top/right/bottom 属性，因此它们的位置由它们在流中的位置决定（它们的“静态位置")，正如我的第一句话所说，是根据到绝对模型。
The fixing and the positioning are two separate things. They're positioned the same as absolutely positioned elements: relative to their containing block. But in contrast with absolutely positioned elements, they remain fixed to that position with respect to the viewport (i.e. they don't move when scrolling):
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
Positioning
The definition of containing block says:
and
which suggests that while their positioning algorithm is the same (they're both positioned relative to their containing block), the containing block for fixed elements is always the viewport, in contrast with absolutely positioned elements, so they should be positioned relative to that and not to any absolutely or fixed-positioned elements.
And as a matter of fact, that is indeed the case. For example, if you add
top: 20pxto.fixed, both divs will be positioned 20 pixels from the top of the viewport. The nested fixed div does not get positioned 20 pixels down from the top of its parent.The reason you're not seeing that in this case is because you're not actually setting any of the left/top/right/bottom properties, so their positions are determined by the position they would have in the flow (their "static position"), which as my first quote said, is done according to the absolute model.
第一个元素
position:fixed;并且内部元素必须是：
position:sticky;First element
position: fixed;And the insider element must be:
position: sticky;仅当使用
position:fixed的元素的祖先之一定义了（其值不同于 none）任何以下样式规则时，才会发生这种情况：filter、transform、perspective，在这种情况下，匹配此条件的最近祖先将被用作元素坐标的参考视口的。来自 MDN
This only occurs when one of the ancestors of an element that uses
position: fixedhas defined (with a value different that none) any of the following styling rules:filter,transform,perspective, where, in this case, the closest ancestor that matches this condition will be used as the reference for the coordinates of the element instead of the viewport.From MDN
我认为这并不是真正的意图。具有固定定位的事物都是相对于窗口定位的，如果您有一个固定的子项是另一个固定的子项，您希望发生什么？您可以轻松地复制行为，不仅可以单独定位两个固定元素，也可以使用其他位置来更改子元素在固定元素内的位置。 ：D
I don't think this is really the intent. Things with fixed positioning are all positioned in relation to the window, if you have a fixed a child of another fixed, what do you want to happen? You can easily duplicate the behavior by not just position both of the fixed elements separately, or using other position to alter the child's position within the fixed element. :D
我认为除了 w3c 所说的之外，没有更多的内容了：
因此，如果您去掉“padding：40px;”您将得到 2 个元素 - 1 个元素超过另一个元素。
与将两个元素绝对定位到具有相同父级（主体）的 top:0 left:0 的效果相同。
I dont think there is anything more to this then what w3c say there is:
So if you get rid of that "padding: 40px;" you will get 2 elements - 1 over another.
Same effect like if you positioned both elements absolutely to top:0 left:0 with same parent(body).
简短回答：
如果您有一个位置固定的可滚动元素（例如模式），并且您希望将其中一个子元素也固定（例如模式关闭按钮），那么解决方案如下：您可以使元素不可滚动，而是在其中创建一个子元素并使其可滚动（例如模态内容）。这样，您可以将
position:absolute应用于您想要固定的子项（例如模态关闭按钮），而不是position:fixed。长答案：
就我而言，我有一个
display:fixed模态，并对其应用了overflow:auto以使其可滚动。然后我想让关闭按钮显示：固定。嵌套
display:fixed在 Chrome 上有效，但在 Firefox 中无效。所以我改变了我的结构，我从模态中删除了overflow: auto以使其不可滚动，而是使模态内容可滚动。并添加了position:absolute来关闭按钮。Short Answer:
if you have a scrollable element with fixed position (a modal for example), and you want to make one of the childs fixed also(modal close button for example), here is the solution: you can make your element non-scrollable, and instead create a child inside of it and make it scrollable(modal content for example). this way , you can apply
position: absoluteto the child you want it to be fixed (modal close button for example), instead ofposition: fixed.Long Answer:
In my case, i had a
display: fixedModal and applied theoverflow: autoto it to make it scrollable. then i wanted to make the close buttondisplay: fixed.Nesting
display: fixedworked on chrome, but not in Firefox. so i changed my structure, i removed theoverflow: autofrom Modal to make it non-scrollable, and instead made the modal content scrollable. and also addedposition: absoluteto close button.