Css 当滚动时，如何使div位于相对位置的容器内并保持其容器的位置

全部：

谢谢你的帮助

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>

---

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

我不太确定我是否正确理解了你的问题，但我认为，您可以将其

位置：固定
并使用
边距
将其推入
容器
将
绝对内部
放置在另一
位置：绝对
div
内，并将
绝对内部
位置更改为
固定
。然后，使用所需的位置设置外部div的样式，相对于父级而不是页面。不要在固定元件上放置任何位置

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



看看我为您创建的JSFIDLE。只需将其位置设置为固定，如果不设置“顶部”和“左侧”显式，它将为父对象继承，使其为父对象而非窗口固定。看看我写的css

记住，如果设置了明确的“顶部偏移”和“左侧偏移”，它将被引用到窗口，但如果使用此技巧，从父元素继承，而不是使用
top
和
left
您使用
margin top
和
margin left
您的元素将固定到父元素以及由边距给出的偏移


注：
margin:0
的code>只是为了修正jsfiddle给出的边距

更新：你想要实现的东西不能用你现在拥有的html结构来完成。您必须将容器包装到另一个div中，并在该div中放入您的
#absoluteinner
，因此
#absoluteinner
和
#container
是兄弟。然后给父级
位置：relative，以及您的
#绝对内部
位置：绝对
，但
#absoluteinner
不会进入
#容器
滚动，它们是分开的，但您模拟它们是一个在另一个内部

我创建了一个额外的
#outter容器
，因此您可以看到另一个滚动，您可以看到
#absoluteinner
已“固定”到
#容器

如果您使用position fixed，您将无法实现这一点，因为position fixed会将元素从流中移除，您可以将其作为我给您的第一个答案用于基本场景，但如果您希望在另一个容器中插入这段html，则无法实现这一点

看看我为您创建的JSFIDLE：

见

<div id="container-wrapper" ...

谢谢您的帮助，但我不太明白为什么固定位置可以用于相对于特定元素的元素位置，我认为固定位置是相对于浏览器窗口的。你能给我一个JSFIDLE的例子或一些详细的演讲吗？是的，我想，我不知道为什么我没有立即提交。谢谢你的帮助。我担心这种方式不是我想要的，因为我无法决定动态更改容器位置时的边距。好吧，我认为如果没有一些Javascript，这是不可能的。谷歌可能比我更能告诉你，对不起：（编辑：看看这里，也许这会有帮助：很遗憾，但是谢谢。我会尝试用谷歌搜索更多的解决方案，看看它们是否有效。谢谢你！你可以使用一个额外的div。这可以接受吗？谢谢你的帮助。你能再多说一点为什么这种方式有效吗？比如为什么固定位置可以使元素相对于其容器而不是容器到浏览器窗口的定位？通常
位置：fixed
是相对于页面的，但由于固定元素上没有
top
或
left
属性，因此不会将其移出其父元素。定位由
位置：absolute
包装器完成，该包装器始终相对于
的第一个父元素>位置：relative
属性或页面。固定位置本身不会相对于父对象，您必须使用绝对坐标。有关更多信息，请参阅此帖子：谢谢！我想工作解决方案最像您和Carlos的感谢帮助。它适用于这种情况，但如果我在外部添加另一个容器容器，绝对div将保持最外面的容器的固定位置，这不是我想让我为你尝试的，你的意思是在#容器外添加另一个容器宽度位置静态？你想#绝对内部固定到#容器对吗？基本上，是的。因为我现在想把结构放在任何地方（在其他结构中，仍然作为一个独立的小部件工作）在页面上。我会给你一个更新，更好的解释，等等。看看更新，这是你的场景的答案
<div id="container-wrapper" ...