Html z指数会影响div的高度吗？

我手上有一个小难题。我有一个应该包含一些图像的div。图像不是浮动的-我使用display:inline block将它们放在那里。这些图像具有一些z索引属性，因为在悬停时，我会使图像的不透明度变暗，并显示一些文本和按钮

然而，应该包含图像的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;
}

350美元4200美元
毛皮大衣

安东尼奥·马拉斯

350美元4200美元
毛皮大衣

安东尼奥·马拉斯

.集装箱{
位置：相对位置；
宽度：200px；
身高：80%；
背景色：#FFFFFF；
显示：内联块；
左边距：60像素；
边缘顶部：20px；
边缘底部：20px；
填充：20px；
}
.装备img{
显示：内联块；
}
.服装{
位置：绝对位置；
宽度：200px；
高度：自动；
左：0；
}
.装备{
z指数：10；
背景色：白色；
}
.装备容器：悬停.装备{
不透明度：.5；
光标：指针；
}
.装备：悬停+.覆盖{
z指数：50；
}
.覆盖：悬停{
z指数：50；
}
.覆盖{
z指数：0；
文本对齐：居中；
字体大小：粗体；
}
.p{
显示：块；
填充：10px0；
颜色：黑色；
不透明度：1；
线高：50%；
}
.p：第n个子项（1）{
利润率最高：50%
}
.价格，.项目{
字体系列：“布兰登怪诞媒介”；
字号：1em；
颜色：#000000；
线高：25%；
利润上限：-10px；
}
奥德普莱斯先生{
文字装饰：线条贯通；
颜色：#383838；
字体大小：.75em；
线高：25%；
}
.设计师{
字体系列：“没有浅斜体”；
字号：1em；
颜色：#000000；
线高：25%；
利润上限：-15px；
}
.第二节{
宽度：100%；
高度：自动；
z指数：50；
背景色：#000000；
}

z-index不影响div的高度

第二节的高度是80%——父母的身高是多少？ 如果你正确地设置了父母的身高，应该没问题

---

此外，您可能希望从“高度”更改为“最小高度”-以确保图像完全显示，以防它们大于您设置的高度。

z-index不会影响div的高度

第二节的高度是80%——父母的身高是多少？ 如果你正确地设置了父母的身高，应该没问题

---

此外，您可能希望从高度更改为最小高度-以确保图像完全显示，以防它们大于您设置的高度。

以下是我认为您需要的内容：

基本上，你的两个盒子不再在黑色背景中的原因是因为你的衣服和覆盖设置为

position:absolute

您只希望覆盖的位置为绝对。其余的只是将其顶部/左侧设置为您希望覆盖的位置

你也有很多随机风格，你可能想清理

最终，z索引不会影响div的高度。它只影响z轴。把它想象成一堆纸，从鸟瞰的角度看那堆纸。你只能在上面看到报纸。这张纸的z指数被认为是最高的（例如34242134）。下面的表的z指数较低。
以下是我认为您需要的内容：

基本上，你的两个盒子不再在黑色背景中的原因是因为你的衣服和覆盖设置为
position:absolute

您只希望覆盖的位置为绝对。其余的只是将其顶部/左侧设置为您希望覆盖的位置

你也有很多随机风格，你可能想清理

最终，z索引不会影响div的高度。它只影响z轴。把它想象成一堆纸，从鸟瞰的角度看那堆纸。你只能在上面看到报纸。这张纸的z指数被认为是最高的（例如34242134）。它下面的表将具有较低的z指数