如何设置div元素的css覆盖顶部[重复]答案

【问题标题】：How to set css overlay top of the div elements [duplicate]如何设置div元素的css覆盖顶部[重复]
【发布时间】：2020-04-21 04:04:13
【问题描述】：

我已经创建了一个覆盖类：

.overlay {
  position: relative;
  display: block;
  background-color: rgba(0,0,0,0.6);
  z-index: 2;
  cursor: pointer;
}

所以我想在任何 div 框元素中设置此类，以便在 ajax 忙时显示覆盖。

<div class="overlay" style="width: 200px; height: 200px; border: 1px solid red;margin: 3px;" >
  <div style="width: 150px; height: 100px; border: 3px solid greenyellow;background-color: indianred; margin: 30px;" >
    <input type="text" value="this is box"/>
    <button>This is button</button>
  </div>
</div>

或者

<div class="overlay" style="width: 150px; height: 100px; border: 3px solid greenyellow; margin: 30px;" >
  <input type="text" value="this is box"/>
  <button>This is button</button>
</div>

但是，div 元素位于叠加层之上。

Working code 在这里。

【问题讨论】：

这能回答你的问题吗？ Basic CSS - how to overlay a DIV with semi-transparent DIV on top
由于您的 div 是叠加层的子对象，并且您只为叠加层设置了背景，因此子 div 将始终位于背景之上

标签： html css

【解决方案1】：

您可以为此使用:before 伪：

.overlay {
  position: relative;
  display: block;
  background-color: rgba(0,0,0,0.6);
  z-index: 2;
  cursor: pointer;
}
.overlay:before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
   position: absolute;
   top: 0;
   left: 0;
}

<div class="overlay" style="width: 150px; height: 100px; border: 3px solid greenyellow; margin: 30px;" >
  <input type="text" value="this is box"/>
  <button>This is button</button>
</div>

【讨论】：

【解决方案2】：

你在找这个吗？

.overlay {
  position: relative;
  display: block;
  background-color: rgba(0,0,0,0.6);
  z-index: 2;
  cursor: pointer;
  overflow: hidden;
}
.overlay:before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
   position: absolute;
   top: 0;
   left: 0;
}

<div class="overlay" style="width: 150px; height: 100px; border: 3px solid greenyellow; margin: 30px;" >
  <input type="text" value="this is box"/>
  <button>This is button</button>
</div>

【讨论】：