Question

所有

感谢您的帮助。

html结构如下：

<div id="container" style="position:relative; top:100px; left:100px; width:200px; height:300px; overflow: auto;">
    <div id="absoluteinner" style="position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:red;">
    </div>
    <div id="staticinner" style="width:100px; height:800px; background-color:purple;">
    </div>
</div>

我认为绝对者可以保持相对于其容器的固定位置，但是当我滚动容器时，绝对者会像静态内容一样移动。我怎样才能确定它的位置？

Answer 1

看看我为你创建的jsfiddle。只要给它定位，如果你没有设置top和left显式，它将继承父级，使其固定为父级而不是窗口。那么看看我写的css。

请记住，如果您设置显式的顶部和左侧偏移量，它将被引用到窗口，但是如果您使用此技巧，则从父级继承，而不是使用top和left，而是使用{{ 1}}和margin-top你将元素固定到父元素和边距给出的偏移量。

http://jsfiddle.net/carloscalla/q6ffnm09/

margin-left

注意：body{ margin: 0; } #absoluteinner{ position: fixed; margin-top: 10px; margin-left: 10px; top: inherit; left: inherit; }的{{1}}只是为了纠正jsfiddle提供的边距。

更新：您现在无法使用html结构实现您想要实现的目标。您必须将容器包装在另一个div中，并在此div中放置margin: 0;，因此body和#absoluteinner是兄弟姐妹。然后你给父母#absoluteinner和你的#container position: relative;，但是#absoluteinner没有进入position: absolute;卷轴，它们是分开的，但你模拟他们是一个在另一个内部。

我创建了一个额外的#absoluteinner，因此您会看到另一个滚动条，并且您看到#container是＆＃34;已修复＆＃34;到#outter-container。

如果您使用固定位置，您将无法实现此目标，因为固定位置会使元素流出，您可以将基本方案作为我给您的第一个答案而不是您想要做什么如果你想在另一个容器中插入这段html。

看看我为你创建的这个jsfiddle：http://jsfiddle.net/carloscalla/gwphpfgy/4/

参见

#absoluteinner

这包装你的容器，所以你模拟一个固定的位置，但这也适用于其他容器，因为它粘在包装上。注意#container只是因为它位于紫色框后面，你可以通过重新排序html结构来避免这种情况，但这不是什么大问题。

Answer 2

＆＃39;我不确定我是否正确理解了您的问题，但我认为，您可以将其position:fixed并使用margin将其推入container。< / p>

Answer 3

将absoluteinner置于另一个position:absolute div内，并将absoluteinner的{{1}}更改为position。然后使用您想要的位置设置外部div，相对于父级而不是页面。不要在固定元件上放置任何位置。

fixed

JSFiddle

如何在相对位置内设置div在滚动时保持其容器的位置

3 个答案: