div 溢出和 z-index

Question

请看下面fiddle:

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

第二 div 行与我在第一行中创建的黄色 "modal popup" 重叠。我试图让黄色框与第二行重叠。我该如何存档？我的先决条件是，我有一堆行，但在其中一些行中，我想显示一个包含信息的小弹出窗口 window。此信息不应与后续行重叠。

这只是一个非常基本的例子来说明我的核心问题。有什么想法吗？

Update:

我更新了我的 fiddle:

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.

Answer 1

也许试试这个：

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 片段：

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

工作fiddle：https://jsfiddle.net/74kmte2g/5/

Answer 2

模态 window 通常高于正常文档流。因此我不会把它放在其他元素中。

把它带到外面 .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>

Answer 3

从 .row class 中删除 z-index: 1。它应该工作正常。

Answer 4

您可以删除 z-index for .row class

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

或您也可以在 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>

或者您还有其他解决此问题的方法：

.row div 是父级 div 所以给它相对位置和 z-index 第一个 div

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

Answer 5

试试这个

我刚转modal & second .row.

这是工作代码

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

div 溢出和 z-index

div overflow and z-index

html

css

stylesheet