css - 修复了带有 z-index 问题的模态
问题描述
我有一个带有 的固定模式z-index: 100
,但它不在页面上的所有元素之上。这是一个元素,position: relative; z-index: 2;
我不知道为什么?!这是小提琴。任何帮助,将不胜感激。谢谢!
解决方案
您需要从文件标题 div 中取出 modal-wrapper div。这是完整的代码。
.paper-header {
align-items: flex-start;
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
background: #ffffff;
min-height: 8rem;
}
.paper-body {
position:relative;
z-index: 1;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal {
width: 32.5rem;
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 101;
padding: 1.25rem;
}
.modal-overlay {
position: absolute;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
background-color: rgba(34, 34, 34, 0.5)
}
<div class="wrapper">
<div class="paper-header">
<h1>
Segment 1
</h1>
</div>
<div class="modal-wrapper">
<div class="modal">
modal content
</div>
<div class="modal-overlay"></div>
</div>
<div class="paper-body">
Segment body
</div>
<div class="paper-header">
<h2>
Segment 2
</h2>
</div>
</div>
推荐阅读
- android - Android:从 Firebase 文档创建新对象的问题
- python - 试图用 Beautiful Soup 从维基百科中获取郊区名称
- javascript - 查找包含 JavaScript 中所有值的数组的所有组合
- html - 如何让背景图像覆盖整个视口屏幕?
- attributes - 向 hdf5 文件添加属性
- amazon-web-services - 如何在 Windows 和 Apache 上的 AWS 上托管两个网站,但只有一个网站有效
- python - 通过多个博客标签索引或过滤 Wagtail 博客文章
- parse-platform - Parse Cloud 函数从 Parse Server 2.8.4 升级到 3.0+ 后返回空对象
- docker - 如果容器已经存在,则需要 pod
- r - 如何使用 DAAG 包在 R 中执行重复的 k 折交叉验证?