65

好的，我注意到了一些东西，但在 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>

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

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

4

6 回答 6

41

固定和定位是两个不同的东西。它们的定位与绝对定位元素相同：相对于它们的包含块。但与绝对定位的元素相比，它们相对于视口保持固定在该位置（即它们在滚动时不会移动）：

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

盒子的位置是根据“绝对”模型计算的，但此外，盒子相对于一些参考是固定的。

定位

包含块的定义说：

如果元素具有“位置：固定”，则在连续媒体的情况下，包含块由视口建立（...）

和

如果元素具有“位置：绝对”，则包含块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”（...）

这表明虽然它们的定位算法是相同的（它们都相对于它们的包含块定位），但固定元素的包含块始终是视口，与绝对定位的元素相比，因此它们应该相对于那个定位和不适用于任何绝对或固定位置的元素。

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

在这种情况下您没有看到的原因是因为您实际上没有设置任何左/上/右/下属性，因此它们的位置由它们在流中的位置（它们的“静态位置” ")，正如我的第一句话所说，是根据绝对模型完成的。

于 2009-09-06T01:20:36.183 回答
12

第一个元素

position: fixed;

内部元素必须是：

position: sticky;

于 2020-05-10T20:52:47.180 回答
3

仅当使用的元素的祖先之一position: fixed已定义（具有与none不同的值）以下任何样式规则时才会发生这种情况：filter, transform, perspective, 在这种情况下，与此条件匹配的最接近的祖先将用作元素坐标的参考，而不是视口。

来自MDN

固定的

该元素会从正常的文档流中移除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块定位，除非它的祖先之一的变换、透视或过滤器属性设置为非无（请参阅 CSS 变换规范），在这种情况下，祖先表现为包含块。（请注意，浏览器与透视和过滤器的不一致会导致包含块的形成。）其最终位置由顶部、右侧、底部和左侧的值确定。

此值始终创建一个新的堆叠上下文。在打印的文档中，元素放置在每一页的相同位置。

于 2020-11-24T03:24:53.013 回答
2

我不认为这是真正的意图。固定定位的东西都是相对于窗口定位的，如果你有一个固定的另一个固定的孩子，你想发生什么？您不仅可以单独定位两个固定元素，也可以使用其他位置来更改子元素在固定元素中的位置，从而轻松复制行为。:D

于 2009-09-06T00:48:05.573 回答
2

我认为这没有什么比 w3c 所说的更重要的了：

生成一个绝对定位的元素，相对于浏览器窗口定位。元素的位置由“left”、“top”、“right”和“bottom”属性指定

所以如果你摆脱那个“填充：40px;” 您将获得 2 个元素 - 1 个超过另一个。

效果相同，就像您将两个元素绝对定位到 top:0 left:0 并具有相同的 parent(body)。

于 2009-09-06T01:11:57.497 回答
1

简短的回答：

如果您有一个位置固定的可滚动元素（例如模态），并且您想让其中一个子元素也固定（例如模态关闭按钮），这是解决方案：您可以使元素不可滚动，并且而是在其中创建一个子项并使其可滚动（例如模态内容）。这样，您可以position: absolute将position: fixed.

长答案：

就我而言，我有一个display: fixedModal 并将其应用于overflow: auto它以使其可滚动。然后我想做关闭按钮display: fixed。

嵌套display: fixed适用于 chrome，但不适用于 Firefox。所以我改变了我的结构，我overflow: auto从 Modal 中删除了使其不可滚动，而是使模态内容可滚动。并添加position: absolute到关闭按钮。

于 2019-10-18T18:08:58.717 回答