当 parent 使用 float 时 child 的绝对位置

Question

我正在做一个设置，其中两个图像和一个文本容器并排使用 float left，但是我还需要在用户悬停时使用带有一些文本的叠加层 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/ 有关工作示例，请参阅 fiddle。（抱歉，我不知道 codepen 是如何工作的！）

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

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

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

^ 以上是解决问题的方法。一个简单的height属性.

当 parent 使用 float 时 child 的绝对位置

Absolute position for child when parent uses float

html

css

z-index

css-position