在相对定位的div内绝对定位图像

Question

在相对定位的div内绝对定位图像

13

我看到了一些与这个问题相关的帖子，但仍然无法使以下内容工作：

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

.left {
  position: absolute;
  left: 0px;
}

.right {
  position: absolute;
  right: 0px;
}

<html>

<body>
  <div class="container">
    <img src="..." class="left" />
    <img src="..." class="right" />
  </div>
</body>

</html>

根据 http://www.w3schools.com/css/css_positioning.asp 中的一行话所述，绝对定位元素被定位相对于第一个具有非静态位置的父元素。如果没有这样的元素，则其包含块为<html>。

问题在于容器div没有高度。我真的不想指定容器div的高度。我知道将一个图像浮动到左侧，将另一个图像浮动到右侧，并在容器div上设置overflow：auto将起作用，但我希望不必采用这种方式，因为我喜欢在相对div内使用绝对定位技术。

这可行吗？

- Justin Miller

我认为@Xactor是正确的。实现您所描述的最佳方法是使用浮点数和清除方法。 - Dan

如果您的父元素是相对定位，为什么子图像的绝对定位不起作用？我不明白您所说的“问题在于容器div没有高度”。 - Michael

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xacto01 · Accepted Answer

由于绝对定位的子元素不在文档流中，因此父容器没有自然的方式可以动态调整大小。

实现您所描述的最佳方法是使用浮动和清除方法：

body {
  padding: 20px;
}

.container {
  position: relative;
  width: 100%;
  background: yellow;
}

.left {
  float: left;
  background: red;
  width: 100px;
  height: 200px;
}

.right {
  float: right;
  background: blue;
  width: 100px;
  height: 200px;
}


/* Use the clearfix technique: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-   
    overflowhidden-demystified/ */

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}


/* IE < 8 */

<body>
  <div class="container clearfix">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
</body>

如果您坚持使用绝对定位，并需要父容器与子元素的高度匹配，那么您将不得不借助JavaScript。