Question

我的手上有一点谜题。我有一个div应该包含一些图像。图像没有浮动 - 我使用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％ - 父母身高是多少？如果您正确设置父母身高，那应该没问题。

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

Answer 2

以下是我认为您想要的内容：http://jsfiddle.net/vvc93jfr/

基本上，你的两个盒子不再在黑色背景中的原因是因为你的装备和叠加设置为position: absolute;

您只希望叠加层具有绝对位置。其余的只是将其顶部/左侧设置为您想要叠加的位置。

您还可能需要清理许多随机样式。

最终，z-index不会影响div的高度。它只影响z轴。把它想象成一堆纸，在鸟瞰图中看着那堆。你只看到顶部的纸张。那张纸基本上具有被认为是最高的z指数（例如3424242134）。它下面的工作表将具有较低的z指数。

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

2 个答案: