html - 如何在固定元素之后粘贴相对元素？

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;
}

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

如有任何帮助，我们将不胜感激!

更新:我正在尝试获得 this JSFiddle 中显示的滚动行为，但要使 container 始终位于图像的底部，即使屏幕宽度(比方说)小于 300px。

Answer 1

在您的 fiddle 中，我能够通过更改 .container 属性来实现所需的行为

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