html - z-index + 溢出:自动 = 错误?
问题描述
我将弹出窗口作为position:fixed
div 并通过层次结构进行传播,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>
解决方案
好的,让我们试试这个我希望它的帮助:
.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>
推荐阅读
- python - Add vertical line after each changing of value in column
- python - 无法在 Docker 中运行 BaseHTTPServer
- apache-spark - PySpark MLlib:AssertionError:分类器未从 HasRawPredictionCol 扩展
- java - 使用 cmd 从 Code 打开 jar
- node.js - 如何使用 mongoose 模式使用或创建 onupdate 中间件?
- javascript - 为什么我的 angularjs 复选框自定义指令不起作用?
- java - 查找 Angular 5 服务订阅返回 null 可观察对象的原因
- php - 如何使用 RecursiveTreeIterator 测试文件夹
- makefile - 设置变量时Makefile不调用shell脚本
- javascript - 当我单击第六列中的复选框时,尝试将脏值设置为 true