时间戳

首页 > 解决方案 > 固定背景图像和绝对定位包装

html - 固定背景图像和绝对定位包装

问题描述

我只在 Google Chrome 上遇到问题。基本 CSS 样式在两个浏览器上的行为不同，我不明白为什么。

这是 Firefox 上的行为，这是预期的结果：

在此处输入图像描述

这是 Chrome 上的行为，这不好，因为图像在滚动时下降：

在此处输入图像描述

您可以在此 JSFiddle 上重现它：https ://jsfiddle.net/zcugdayv/26/

我试图将代码减少到最少以解决问题：

.app {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.parallax-wrapper {
  height: 100vh;
  background: url('http://m0.libe.com/blogs/cache/3e/9f/3e9f3c94db337827f6d1d0a859a433f4.jpg') fixed center;
  background-size: cover;
}

.normal-wrapper {
  height: 600px;
  background: green;
}
<div class="app">
  <div class="parallax-wrapper"></div>
  <div class="normal-wrapper"></div>
</div>

我知道如果我不在课堂上使用 a position: absolute;，app它会再次起作用，但出于不同的原因我需要它。

你认为这是谷歌浏览器本身的一个错误，它会在未来的版本中得到修复，或者它是谷歌浏览器本身出于特定原因实现的新东西？

如果 Google Chrome 上的行为正常，为什么图像会下降？我所看到的数学是什么？

标签： htmlcss

解决方案

我不确定为什么在 Chrome 中会发生这种情况，但我已经为你做了一个解决方法。将以下内容添加到每个规则中，它应该可以正常工作。

.parallax-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
}
.normal-wrapper {
    margin-top: 100vh;
    z-index: 1;
    position: relative;

}

推荐阅读