父母使用浮动时孩子的绝对位置

Question

我正在做一个设置，其中两个图像和一个文本容器使用左浮动并排，但是当用户将鼠标悬停在上面时，我还需要使用带有一些文本的覆盖 div，但这会破坏显示。

这是我的 HTML 代码：

<div class="container">
  <div class="parent-container">
    <div class="child-container">
      <img src="http://blog.hdwallsource.com/wp-content/uploads/2016/02/solid-color-wallpaper-21953-22506-hd-wallpapers.jpg" alt="" />
      <div class="overlay">
        <p>Some text</p>
      </div>
    </div>
    <div class="child-container">
      <img src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Solid-Color-HD-Wallpapers-For-Desktop-768x432.jpg" alt="" />
    </div>
    <div class="child-container-text">
      <p>hhohdoioadoasabs</p>
    </div>
  </div>
</div>

这是我的 CSS：

.parent-container {
  position: relative;
  width: 100%;
}

.child-container {
  float: left;
  position: relative;
  width: 30%;
}

.child-container img {
  position: absolute;
  height: 100px;
  width: 100%;
}

.child-container-text {
  background-color: #000;
  float: left;
  height: 100px;
  position: absolute;
  width: 40%;
}

.overlay {
  background-color: #FFF;
  opacity: 0.3;
  position: absolute;
  z-index: 999;
}

这是一个带有它的 CodePen：https://codepen.io/leofontes/pen/ORPJWd?editors=1100

知道为什么它们会堆积起来吗？我之前也使用过同样的绝对定位技巧来叠加，它成功了，为什么浮动会破坏它？

谢谢

Answer 1

https://jsfiddle.net/37LsfmLa/ 有关工作示例，请参见小提琴。 （抱歉，我不知道 codepen 是如何工作的！）

您的问题含糊不清，但我相信这就是您要寻找的。您的代码的问题是您给图像一个绝对位置，同时将它们放在浮动 div 中。标准 float 行为将折叠任何空 div。它会将任何元素缩小到其内容大小。 您的元素设置了width，应该可以解决这个问题，但还有另一个问题：它们没有高度。结果：他们崩溃了。 -- 请注意，带有position:absolute 的元素确实不算作延伸其父级的内容。

这就是你的问题所在。你需要给你的 div 一个静态高度才能使这样的工作，虽然我想知道为什么你的图像甚至有position:absolute？但是，不管你的船是什么。 （我不会在任何应该填充元素的图像上使用position:absolute，但这只是我的偏好）

.child-container {
  float: left;
  position: relative;
  width: 30%;
  display: block;
  height: 100px;
}

^ 以上是修复它的原因。一个简单的height 属性。