Question

我的网页顶部有一个固定的div，其中包含background-color: black。我的网页中间也有一张图片。（https://imgur.com/UteGyt6）

当我滚动图像时，div将图像切成两半。（https://imgur.com/y4wnKUT）

我正在尝试让div在图像下方，所以当div滚动过去时图像位于顶部＆amp;可见。

努力寻找解决方案 - 任何帮助都会很棒！

希望实现这一目标 - https://jsfiddle.net/q432wcx7/ （代码在Chrome中运行...而不是Safari）

的index.html

<div class="logodiv"> </div>

<a href="./index.html"><img src="./assets/img/logoI.png" class="logo" alt="Logo"></a>

的style.css

.logo {
  width: 500px;
  display: block;
  position: absolute;
  z-index: 1000;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}


.logodiv{
  width: 100%;
  display: block;
  position: fixed;
  height: 184px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: black;
  z-index: 1000;
}

Answer 1

这个问题非常常见 - 这是Safari中的一个错误。

请改为尝试：

.logo {
  -webkit-transform: translate3d(0,0,0);
  width: 500px;
  display: block;
  position: absolute;
  z-index: 1000;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
  }

.logodiv{
  width: 100%;
  display: block;
  position: fixed;
  height: 185px;
  top: 0 !important;
  left: 0;
  right: 0;
  margin: auto;
  background-color: black;
  z-index: -1000;
}

我没有野生动物园，所以我不能完全发短信，但我认为这是正确的。如果不是，请告诉我，我会改变我的答案。

Safari Bug？滚动过去时，固定的div元素在图像元素下面的上半部分是一半？

1 个答案: