Z 索引 + 溢出:自动 = 错误?

Question

我正在将弹出窗口制作为position:fixeddiv并通过层次结构z-index传播，以确保此div位于所有内容之上。一切都很好，除了一种情况，当Chrome绘制滚动到我的弹出窗口时，iOS safari会剪辑我的弹出窗口。

我做了超小的复制 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>

Answer 1

好的，让我们试试这个，希望它有所帮助：

.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>