html - z-index 会影响 div 的高度吗？

Question

我手头有一点难题。我有一个应该包含一些图像的 div。图像不是 float 的——我已经使用 display: inline-block 将它们放在了那里。这些图像具有一些 z-index 属性，因为在悬停时我调暗了图像的不透明度并显示了一些文本和一个按钮。

然而，应该包含图像的 div 并没有改变它的高度来适应它的内容。我完全不知道为什么会这样。调整高度属性将调整该部分的大小，但它不会自动调整以包含图像，即使它们是 div 的子级....

谁能告诉我为什么会发生这种情况以及如何解决它？

我已经包含了我的部分 html 和 css。

<div class="second-section">
  <div class="outfitcontainer">
    <div class="outfit">
      <img src="purelyoutfit6.png" width="100%" height="100%"/>
    </div>
    <div class="overlay">
      <p class="price">$350 <span class="oldprice">$4200</span></p>
      <p class="item">FURR COAT</p>
      <p class="designer">Antonio Marras</p>
      <a href="#"><button type="button" class="btn btn-getit">GET IT</button></a>
    </div>
  </div>
  <div class="outfitcontainer">
    <div class="outfit">
      <img src="purelyoutfit7.png" width="100%" height="100%"/>
    </div>
    <div class="overlay">
      <p class="price">$350 <span class="oldprice">$4200</span></p>
      <p class="item">FURR COAT</p>
      <p class="designer">Antonio Marras</p>
      <a href="#"><button type="button" class="btn btn-getit">GET IT</button></a>
    </div>
  </div>
</div>

.outfitcontainer {
  position: relative;
  width: 200px;
  height: 80%;
  background-color: #FFFFFF;
  display: inline-block;
  margin-left: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
}
.outfit img {
  display: inline-block;
}

.outfit, .overlay {
  position: absolute;
  width: 200px;
  height: auto;
  left: 0;
}

.outfit {
  z-index: 10;
  background-color: white;
}
.outfitcontainer:hover .outfit {
  opacity: .5;
  cursor: pointer;
}
.outfit:hover + .overlay{
  z-index: 50;
}
.overlay:hover {
  z-index: 50;
}

.overlay {
  z-index: 0;
  text-align: center;
  font-weight: bold;
}
.overlay p {
  display: block;
  padding: 10px 0;
  color: black;
  opacity: 1;
  line-height: 50%;
}
.overlay p:nth-child(1) {
  margin-top: 50%
}
.price, .item {
  font-family: "Brandon Grotesque Medium";
  font-size: 1em;
  color: #000000;
  line-height: 25%;
  margin-top: -10px;
}
.oldprice {
  text-decoration: line-through;
  color: #383838;
  font-size: .75em;
  line-height: 25%;
}
.designer {
  font-family: "Didot Light Italic";
  font-size: 1em;
  color: #000000;
  line-height: 25%;
  margin-top: -15px;
}
.second-section {
  width: 100%;
  height: auto;
  z-index: 50;
  background-color: #000000;
}

Answer 1

z-index 不影响 div 的高度。

.second-section 的高度是 80% - parent 的高度是多少？如果您正确设置了 parent 的高度，应该没问题。

此外，您可能希望将高度更改为最小高度 - 以确保在图像大于您设置的高度时完整显示。