Question

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

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

和HTML：

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

据我所知，该元素相对于其最近的父级也是固定定位的，该父级也是固定定位的。这是否适用于所有浏览器;还有，这是一个错误，还是故意的行为？

到目前为止，我还没有在互联网上找到关于这个话题的任何内容，只是'固定位置使它坚持到页面'。

Answer 1

固定和定位是两个独立的事情。它们与绝对定位元素的位置相同：相对于它们的containing block。但与绝对定位的元素相比，它们相对于视口保持固定在该位置（即滚动时它们不移动）：

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

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

定位

definition of containing block说：

如果元素具有'position：fixed'，则在连续媒体的情况下由视口建立包含块（...）

和

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

这表明虽然它们的定位算法是相同的（它们都相对于它们的包含块定位），但固定元素的包含块总是视口，与绝对定位的元素相比，所以它们应该相对定位那而不是任何绝对或固定定位的元素。

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

在这种情况下你没有看到的原因是因为你实际上没有设置任何左/上/右/下属性，所以它们的位置取决于它们在流中的位置（它们的位置） “static position”），正如我的第一句话所说，是根据绝对模型完成的。

Answer 2

第一个元素

position: fixed;

内幕元素必须为：

position: sticky;

Answer 3

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

Answer 4

我认为除此之外还有更多内容可以说：

产生绝对定位元素，相对于浏览器窗口。元素的位置使用“left”，“top”指定， “正确”和“底部”属性

所以，如果你摆脱了“填充：40px;”你将获得2个元素 - 1个而不是另一个元素。

同样的效果，如果你将两个元素绝对放在顶部：0左：0，同一个父（body）。

Answer 5

简短答案：

如果您有一个具有固定位置的可滚动元素（例如，模态），并且还希望使其中一个子元素也固定（例如，模态关闭按钮），则可以采用以下解决方案：您可以将元素设置为非可滚动的，而是在其内部创建一个子级并使之可滚动（例如，模态内容）。这样，您可以将position: absolute应用于您要固定的孩子（例如，模式关闭按钮），而不是position: fixed。

详细答案：

在我的情况下，我有一个display: fixed模态，并对其应用了overflow: auto以使其可滚动。然后我想按下关闭按钮display: fixed。

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

Answer 6

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

来自MDN

固定

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于由视口建立的初始包含块定位，除非其祖先之一的transform，perspective或filter属性设置为除其他属性外（参见CSS Transforms Spec），在这种情况下，祖先的行为与包含块。（请注意，浏览器在透视图和过滤器方面存在不一致，从而导致了包含块的形成。）其最终位置由top，right，bottom和left的值确定。

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

CSS：位置：固定在位置内：固定

6 个答案:

定位