Question

请查看以下小提琴：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

更新

我更新了我的小提琴：

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

您可以删除.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 您也可以尝试使用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，所以给它第一个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>

Answer 2

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

Answer 3

也许试试这个：

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

工作小提琴：https://jsfiddle.net/74kmte2g/5/

Answer 4

模态窗口通常高于正常文档流程。因此我不会把它放在另一个元素中。

将其带到.row以外也可以解决问题。

＆＃13;

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

＆＃13;

<div class="row">
  Content
</div>
<div class="row">
  Content
</div>
<div class="modal"></div>

＆＃13;

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

5 个答案: