position fixed div in absolute positioned div 有效 - 但为什么呢？

Question

我需要给一个元素固定位置，但我不能相对于视口定位，我需要它相对于容器定位。

我设法做到了，但我想知道它是如何工作的以及为什么工作，因为实际上我认为固定位置总是相对于视口而不是父元素定位。

这是我的（工作）代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body {
    height: 2000px;
}

.container {
    position: relative;
}

.sidebar {
    width: 200px;
    background-color: red;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.fixed {
    width: 100px;
    height: 100px;
    background-color: green;
    position: fixed;
    /* top: 0;
    left: 0; */
    margin-left: 10px;
    margin-top: 10px;
}

</style>
</head>

<body>

<div class="container">
    <div class="sidebar">
        <div class="fixed"></div>
    </div>
</div>

</body>
</html>

Fiddle: https://jsfiddle.net/tnwLycao/

元素 "fixed" 可以很容易地用边距定位（例如 margin-left/margin-top）。但是，当我停用边距并尝试使用 top/left 定位 "fixed" 时，它再次相对于视口定位，而不是相对于父级 container/element.

谁能告诉我这是如何以及为什么有效的？

Answer 1

具有 position: fixed 的元素确实相对于视口（或浏览器）定位。但是，因为是绝对定位元素，所以是"positioned relative to the initial containing block established by the viewport".

这在 position 文档中有说明：

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.

也就是说，当您指定margin-top和margin-left时，这些值是相对于parent的。并且因为该元素是相对于父元素定位的，所以默认的 top 和 left 是从父元素 继承的 。在您的示例中，.fixed 元素具有 100px 的 top 值，因为它 继承了 100px 的 top 值] 来自 .sidebar（父级）。当您在 .fixed 上设置 top: 0 时，您正在覆盖这个值（从 top: 108px 到 top: 0）：

因此，该元素似乎已被占用 'out of flow'。但是，它仍然始终相对于视口定位；它只有一个初始偏移量（它从其父级继承）。

position fixed div in absolute positioned div 有效 - 但为什么呢？

position fixed div in absolute positioned div works - but why?

css

position

css-position

fixed