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>

提琴：https://jsfiddle.net/tnwLycao/

“固定”元素可以轻松地留有边距（例如，margin-left / margin-top）。但是，当我停用边距并尝试将“固定”位置设置为顶部/左侧时，它再次相对于视口而不是相对于父容器/元素相对于视口定位。

有人可以给我提示这是如何以及为什么起作用的吗？

Answer 1

具有position: fixed的元素确实确实相对于视口（或浏览器）定位。但是，由于它是绝对定位的元素，因此它“相对于由视口建立的初始containing block定位”。

这在position文档中列出：

绝对定位的元素是其计算的position值为absolute或fixed的元素。 top，right，bottom和left属性指定距元素containing block的边缘的偏移量。（包含块是元素相对于其放置的祖先。）如果元素具有边距，则将它们添加到偏移量中。

也就是说，当您指定margin-top和margin-left时，这些值是相对于父级的。而且由于元素是相对于父元素放置的，因此从父元素继承了默认的top和left。在您的示例中，.fixed元素的top值为100px，因为它从{继承了top的{{1}}值{ {1}}（父）。在100px上设置.sidebar时，您将覆盖该值（从top: 0到.fixed）：

因此，该元素似乎已“流出”。但是，它始终始终相对于视口定位；它只有一个初始偏移量（它是从其父级继承的）。

在绝对位置div中固定位置div可以工作-但是为什么呢？

1 个答案: