html - Z索引+溢出:自动=错误？

我将弹出窗口设置为position:fixed div，并通过层次结构z-index进行传播，以确保此div位于一切之上。一切正常，除了Chrome浏览器在我的弹出窗口上滚动时，iOS野生动物园会剪辑我的弹出窗口。

我制作了超小型repro https://codepen.io/heavenmaster/pen/XWrQmZY
请注意，位置absolute和设置z-index对我来说至关重要。

我迫切需要一个解决方法。

.scrollview {
  z-index: 1;
  position: absolute;
  margin: 100px;
  width: 200px;
  height: 200px;
  border: solid gray 1px;
  overflow: auto;
}

.container {
  z-index: 1;
  position: absolute;
  width: 1000px;
  height: 1000px;
}

.tooltip {
  z-index: 1;
  width: 250px;
  height: 50px;
  border: solid 1px gray;
  background: silver;
  position: fixed;
  left: 80px;
  top: 80px;
}

<div class='scrollview'>
  <div class='container'>
    <div class='tooltip'>Tooltip</div>
  </div>
</div>

最佳答案

好的，让我们尝试一下，希望对您有所帮助：

.scrollview1
{
  z-index: 1;
    position: absolute;
    margin: 100px;
    width: 250px;
    height: 200px;
}
.scrollview
{
  z-index: 1;
/*   position: absolute; */
/*   margin: 100px; */
  width: 200px;
  height: 200px;
  border: solid gray 1px;
  overflow: auto;
}

.container{
  z-index: 1;
/*   position: absolute; */
  width: 1000px;
  height: 1000px;
}

.tooltip{
  z-index: 1;
  width: 250px;
  height: 50px;
  border: solid 1px gray;
  background: silver;
  position: fixed;
  left: 80px;
  top: 80px;
}

<div class='scrollview1'><div class='scrollview'>
  <div class='container'>
    <div class='tooltip'>Tooltip</div>
  </div>
  </div></div>

关于html - Z索引+溢出:自动=错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58116220/