嵌套具有 position: fixed 的元素时会发生什么? [英] What happens when nesting elements with position: fixed inside each other?

问题描述

好的，我注意到了一些东西，但在 CSS 规范中找不到.使用 position: fixed 对元素进行样式设置将相对于浏览器视口进行绝对定位.如果将一个固定位置的元素放在另一个元素中会发生什么?

CSS 示例:

.fixed {位置:固定；宽度:100px；高度:100px；背景:红色；}#父母{右 100 像素；填充:40px；}.fixed .fixed {背景:蓝色；}

<div class="fixed">

据我所知，该元素相对于其最近的父元素也是固定位置的，该父元素也是固定位置的.这在所有浏览器中都可以观察到吗?另外，这是一个错误，还是故意的行为?

到目前为止，我还没有找到有关此主题的任何内容，只是固定位置使其粘在页面上".

解决方案

固定和定位是两个独立的事情.它们与绝对定位元素的定位相同:相对于它们的 包含块.但是与绝对定位的元素相比，它们相对于视口保持固定在那个位置(即它们在滚动时不会移动):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

<块引用>

框的位置是根据绝对"模型计算的，但此外，框相对于某个参考是固定的.

定位

包含块的定义 说:

<块引用>

如果元素有'position: fixed'，在连续媒体(...)的情况下，包含块由视口建立

和

<块引用>

如果元素有'position: absolute'，则包含块由最近的祖先建立，'position'为'absolute'、'relative'或'fixed'(...)

这表明虽然它们的定位算法是相同的(它们都相对于它们的包含块定位)，但固定元素的包含块始终是视口，与绝对定位的元素相反，因此它们应该相对定位那个，而不是任何绝对或固定定位的元素.

事实上，情况确实如此.例如，如果您将 top: 20px 添加到 .fixed，则两个 div 都将位于距视口顶部 20 像素的位置.嵌套的固定 div 没有被定位在其父级顶部向下 20 像素处.

在这种情况下您没有看到的原因是因为您实际上没有设置任何左/上/右/下属性，因此它们的位置由它们在流中的位置决定(它们的静态位置")，这是我的第一句话说，是按照绝对模型做的.

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'.

解决方案

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

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference.

Positioning

The definition of containing block says:

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media (...)

and

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' (...)

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: 20px to .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 的元素时会发生什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！