Question

我有一个带图像的标题，应该在滚动时修复。在下面我有一个容器，它应始终与标题具有相同的距离。因此，如果我将窗口水平调整大小，则图像会调整大小，因此内容会更改位置。

示例：

我将包装器设置为position:fixed;，将容器设置为position:relative;。如果你调整窗口的大小，它的工作完美..容器与图片保持相同的距离..但是......我不能再滚动了，因此我再也看不到内容了。 :-(

我不知道如何使用JS，所以也许有人可以给我一个提示

Answer 1

任何已修复的元素，其所有子元素都已修复。所以你的包装器中的任何东西都会被锁定，这就是你无法滚动的原因。如果从包装元素中删除fixed，则导航仍然是固定的，并且正文将正确滚动。从那里，我喜欢使用的一个小技巧就是这样......

<figure class="image_container" style="background:url(files/Header/Haus_Sommer.jpg) no-repeat bottom center fixed;background-size:cover;">
  <img src="files/Header/Haus_Sommer.jpg" width="1460" height="1000" alt="" style="opacity: 0;">
</figure>

这样，您可以使用background-attachment：fixed作为标题图像，并且仍然可以从图像标记本身获得缩放，因为它只是将不透明度设置为0但仍然存在。

将相对div定位到固定div

1 个答案: