固定元素后如何粘贴相对元素？

Question

我有以下html结构：

<div class="parent">
    <img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>

以下css：

.container, .parent{
    position: relative;
}
.child{
    display: block;
    max-width: 100%;
    height: auto;
    position: fixed;
}

因为图像是fixed，所以父级的高度可能是0.因此容器放在图像上。但是我希望将图像固定并将容器放在图像之后，同时保持响应。

任何帮助将不胜感激！

更新：我正在尝试获取this JSFiddle中显示的滚动行为，但要使container始终位于图像的底部，即使屏幕宽度（假设）在300px下。

Answer 1

在你的小提琴中，我能够通过从

更改.container属性来实现所需的行为

margin-top: 300px至margin-top:50%

Answer 2

如果向图像添加位置类，则可能看不到更改。这是在div标签上使用的。尝试将该类添加到用于围绕图像的新div标签。

或者，您可以为图像添加display：block，但这会使事情变得更复杂。

我认为这就是你所要求的，但我仍然有点困惑。