我怎样才能让一个 div 覆盖它背后的整个 div？答案

【问题标题】：How can I make a div cover the entirety of a div behind it?我怎样才能让一个 div 覆盖它背后的整个 div？
【发布时间】：2018-05-28 12:00:37
【问题描述】：

我试图在页面上默认设置一个方形 div（红色框）。当用户将鼠标悬停在它上面时，第二个 div 应该显示为半透明的黑色背景和一些文本/内容。我正在尝试在他的网站上模仿Devon Stank's project section。

我现在的代码增加了默认方形红色框的高度，第二个 div 并没有覆盖整个红色框。代码有什么问题？

Fiddle

.project-box {
  position: relative;
  width: 30%;
  padding-top: 30%;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  background-color: red;
}

.hover-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30%;
  overflow: hidden;
  display: inline-block;
}

.default-hover {
  opacity: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

.default-box:hover .default-hover {
  opacity: 1;
}

<div class="default-box project-box">
  <div class="default-hover hover-content">hello</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

如果父级的height 未定义，height: 100%; 将无法在元素上工作。
此外，如果您坚持使用 position: relative 并在父级上使用 padding，您将无法覆盖所有内容。

如果您想覆盖所有 .project-box（父级），无论其 padding 值如何，
我建议你在它的孩子上使用absolute 定位：
（我已经通过添加新类 .veil 来完成它，但它可以在您现有的类中完成）

.project-box {
  position: relative; /* ADDED so that the absolute positioning refers to this parent */
  width: 30%;
  padding-top: 30%;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  background-color: red;
}

.hover-content {
  /* REMOVED position and sizes */
  padding-top: 30%;
  overflow: hidden;
  display: inline-block;
}

.default-hover {
  opacity: 0;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

.default-box:hover .default-hover {
  opacity: 1;
}


/* ADDED this class */
.veil {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="default-box project-box">
  <!-- Added a class for the child here -->
  <div class="default-hover hover-content veil">hello</div>
</div>

希望对你有帮助。

【讨论】：

【解决方案2】：

在这里，它可能对你有帮助，试试吧。

.project-box {
position: relative;
width: 30%;
height:100%
}

.default-box {
 background-color: red;
 }

.hover-content {
 position: relative;
 width: 100%;
 height: 100%;
 text-align:center;
 padding-top: 30%;
 }

【讨论】：