Html div溢出和z索引_Html_Css_Stylesheet

Html div溢出和z索引

html css

Html div溢出和z索引,html,css,stylesheet,Html,Css,Stylesheet,请看一下下面的小提琴： .row{ 高度：25px；宽度：300px；背景色：红色；溢出：可见；边框：1px纯黑；位置：绝对位置； } .莫代尔{ 宽度：200px；高度：100px；背景颜色：黄色； z指数：10；位置：绝对位置；左：3px；顶部：3px； } 内容内容也许可以试试这个： HTML代码段： <html> <head> </head> <body> <div class="row-wrapper

请看一下下面的小提琴：

.row{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
边框：1px纯黑；
位置：绝对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}


内容
内容

也许可以试试这个：

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>

工作小提琴：

也许可以试试这个：

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>

工作小提琴：模式窗口通常高于正常文档流。因此，我不会把它放在其他元素中

把它带到

.row

之外也可以解决这个问题

.row{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
边框：1px纯黑；
z指数：1；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}


内容
内容

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

把它带到

.row

之外也可以解决这个问题

.row{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
边框：1px纯黑；
z指数：1；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}


内容
内容

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

您可以删除.row类的z索引

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

.row{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
边框：1px纯黑；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}
内容
内容

或您也可以在z索引保持不变的情况下尝试此操作

.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{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
z指数：1；
边框：1px纯黑；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}
内容
内容

或者，您还有另一个解决此问题的解决方案：

.row div是父div，因此为其指定位置相对值和第一个div的z索引

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

.row{
高度：25px；
宽度：300px；
背景色：红色；
位置：相对位置；
溢出：可见；
边框：1px纯黑；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
} 
内容
内容

您可以删除.row类的z索引

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

.row{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
边框：1px纯黑；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}
内容
内容

或您也可以在z索引保持不变的情况下尝试此操作

.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{
高度：25px；
宽度：300px；
背景色：红色；
溢出：可见；
z指数：1；
边框：1px纯黑；
位置：相对位置；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
}
内容
内容

或者，您还有另一个解决此问题的解决方案：

.row div是父div，因此为其指定位置相对值和第一个div的z索引

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

.row{
高度：25px；
宽度：300px；
背景色：红色；
位置：相对位置；
溢出：可见；
边框：1px纯黑；
}
.莫代尔{
宽度：200px；
高度：100px；
背景颜色：黄色；
z指数：10；
位置：绝对位置；
左：3px；
顶部：3px；
} 
内容
内容

试试这个
我只需切换
模式和第二行
这是工作代码

.row{ 高度：25px；宽度：300px；背景色：红色；溢出：可见；边框：1px纯黑；位置：绝对位置； } .莫代尔{ 宽度：200px；高度：100px；背景颜色：黄色； z指数：10；位置：绝对位置；左：3px；顶部：3px； }

内容内容
试试这个
我只需切换
模式和第二行
这是工作代码

.row{ 高度：25px；宽度：300px；背景色：红色；溢出：可见；边框：1px纯黑；位置：绝对位置； } .莫代尔{ 宽度：200px；高度：100px；背景颜色：黄色； z指数：10；位置：绝对位置；左：3px；顶部：3px； }

内容内容
Remove
z-index:1来自.row …？从可用性或工效学的角度来看，最好的办法是使用一个模态窗口来完成这项工作，而不是将div重叠在另一个div上……是的，我知道。。。但在这种情况下，我使用的是ag网格。。。所以我别无选择。删除z-index:1来自.row …？从可用性或工效学的角度来看，最好的办法是使用一个模态窗口来完成这项工作，而不是将div重叠在另一个div上……是的，我知道。。。但在这种情况下，我使用的是ag网格。。。所以我别无选择。不，我确实需要我的模态di