div溢出和z-index
[英]div overflow and z-index
问题描述
Please have a look at the following fiddle: 
请看以下小提琴：
https://jsfiddle.net/y7w705wb/20/ https://jsfiddle.net/y7w705wb/20/
.row { height: 25px; width: 300px; background-color: red; overflow: visible; border: 1px solid black; position: absolute; } .modal { width: 200px; height: 100px; background-color: yellow; z-index: 10; position: absolute; left: 3px; top: 3px; }
<html> <head> </head> <body> <div class="row" style="transform: translateY(0px);"> Content <div class="modal"></div> </div> <div class="row" style="transform: translateY(25px);"> Content </div> </body> </html>
The second div row overlaps the yellow "modal popup" I created in the first row. 第二个div行与我在第一行中创建的黄色“模式弹出窗口”重叠。 I am trying to let the yellow box overlap the second row. 我试图让黄色框与第二行重叠。 How can I archive that? 我该如何存档？ My prerequisites are, that I have a bunch of rows, but in some of them I want to display a small popup window, that contains information. 我的先决条件是，我有一堆行，但是在其中一些行中，我想显示一个小的弹出窗口，其中包含信息。 This information should not be overlapped by subsequent rows. 此信息不应与后续行重叠。
This is only a very basic example to show my core problem. 这只是显示我的核心问题的一个非常基本的示例。 Any ideas? 有任何想法吗？
Update:
I updated my fiddle: 我更新了小提琴：
https://jsfiddle.net/y7w705wb/20/ https://jsfiddle.net/y7w705wb/20/
The reason why I ask this question is, because I am using ag-grid as datatable in my app and want to display a modal inside one of the cells. I cannot change the cell structure, so I really have to do it like in my fiddle example.
5 个解决方案
解决方案1
3 2018-03-14 09:01:54
You can remove z-index for .row class 您可以删除.row类的z-index
.row {
height: 25px;
width: 300px;
background-color: red;
overflow: visible;
border: 1px solid black;
position: relative;
}
.modal {
width: 200px;
height: 100px;
background-color: yellow;
z-index: 10;
position: absolute;
left: 3px;
top: 3px;
}
<div class="row">
Content
<div class="modal"></div>
</div>
<div class="row">
Content
</div>
OR You can try this also where z-index remains the same. 或者您也可以在z-index不变的情况下尝试此操作。
.row {
height: 25px;
width: 300px;
background-color: red;
overflow: visible;
z-index:1;
border: 1px solid black;
position: relative;
}
.modal {
width: 200px;
height: 100px;
background-color: yellow;
z-index: 10;
position: absolute;
left: 3px;
top: 3px;
}
<div class="row">
Content
</div>
<div class="row">
Content
</div>
<div class="modal"></div>
OR you also have another solution for this issue: 或者，您也有针对此问题的另一种解决方案：
.row div is a parent div so give it position relative and z-index for 1st div .row div是父div，因此请为其指定相对位置和第一个div的z-index
.row {
height: 25px;
width: 300px;
background-color: red;
position:relative;
overflow: visible;
border: 1px solid black;
}
.modal {
width: 200px;
height: 100px;
background-color: yellow;
z-index: 10;
position: absolute;
left: 3px;
top: 3px;
}
<div class="row" style="transform: translateY(0px);z-index:1">
Content
<div class="modal"></div>
</div>
<div class="row" style="transform: translateY(25px);"> Content
</div>
解决方案2
1 已采纳 2018-03-14 08:41:51
Remove z-index: 1 from the .row class. 从.row类中删除z-index：1。 It should work Fine. 它应该工作正常。
解决方案3
0 2018-03-14 08:32:27
Maybe try this: 也许试试这个：
HTML snippet: HTML片段：
<html>
<head>
</head>
<body>
<div class="row-wrapper">
<div class="modal"></div>
<div class="row">
Content
</div>
<div class="row">
Content
</div>
</div>
</body>
</html>
CSS snippet: CSS片段：
.row {height: 25px; width: 300px; background-color: red; overflow: visible; border: 1px solid black;
position: relative;}
.modal {width: 200px; height: 100px; background-color: yellow; z-index: 10; position: absolute; left: 3px; top: 3px; }
Working fiddle: https://jsfiddle.net/74kmte2g/5/ 工作提琴： https : //jsfiddle.net/74kmte2g/5/
解决方案4
0 2018-03-14 08:33:01
A modal window is normally above the normal document flow. 模态窗口通常在普通文档流上方。 Therefor I wouldn't put it inside an other element. 因此，我不会将其放在其他元素中。
Taking it outside .row fixes the problem as well. 将其放在.row之外也.row解决此问题。
.row { height: 25px; width: 300px; background-color: red; overflow: visible; border: 1px solid black; z-index: 1; position: relative; } .modal { width: 200px; height: 100px; background-color: yellow; z-index: 10; position: absolute; left: 3px; top: 3px; }
<div class="row"> Content </div> <div class="row"> Content </div> <div class="modal"></div>
解决方案5
0 2018-03-14 09:13:55
Try this one 试试这个
I just switch modal & second .row . 我只是切换modal & second .row 。
Here is the working code 这是工作代码
.row { height: 25px; width: 300px; background-color: red; overflow: visible; border: 1px solid black; position: absolute; } .modal { width: 200px; height: 100px; background-color: yellow; z-index: 10; position: absolute; left: 3px; top: 3px; }
<html> <head> </head> <body> <div class="row" style="transform: translateY(0px);"> Content </div> <div class="row" style="transform: translateY(25px);"> Content </div> <div class="modal"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.