Question

我有两个或更多个需要相互重叠的div（由于某些过渡效果，即切换标签并且缓慢消失）。

在这两个div之下有一个页脚元素。

如果我使用position: absolute，则父元素会折叠，而div与页脚元素重叠。

我可以用脚本计算最高的高度。但也许有CSS方法可以将父元素的高度与最高元素保持在一起，但让孩子在视觉上重叠？

编辑：孩子们的宽度也是未知的，因为设计是响应性的。

＆＃13;

.parent{
	border: 1px solid green;
	position: relative;
}

.one{
	background-color: red;
	position: absolute;
	width: 300px;
}

.two{
	background-color: blue;
	position: absolute;
	width: 400px;
}

footer{
	border: 1px solid magenta;
	text-align: right;
}

＆＃13;

<div class="parent">
	<div class="one">
		Div one to overlap. Height unknown, width unknown<br>
		Div one to overlap. Height unknown, width unknown<br>
		Div one to overlap. Height unknown, width unknown<br>
	</div>

	<div class="two">
		Div two to overlap. Height unknown, width unknown<br>
		Div two to overlap. Height unknown, width unknown<br>
	</div>

	<!-- ... --->

	<footer>
		Footer must be below all divs
	</footer>
</div>

＆＃13;

Answer 1

不，只有具有绝对位置的元素才能使用CSS。请查看this post的答案以获取详细说明。

Answer 2

如果你想实现目标，就不能使用绝对位置。因为绝对定位的元素被从正常布局中拿走。父元素不知道它的高度。

你可以通过以下方式做到：

直播Jsfiddle

CSS：

parent{
  border: 1px solid green;
}

.one{
  background-color: red;
  float: left;
  width: 300px;
}

.two{
  margin-left:-300px;
  float: left;
  width: 300px;
  background-color: blue;

}
footer{
  clear: both;
  border: 1px solid magenta;

}

HTML：

<div class="parent">
    <div class="one">
        Div one to overlap. Random unknown<br>
    Div one to overlap. Random unknown<br>
    Div one to overlap. Random unknown<br>
    </div>

    <div class="two">
        Div two to overlap. Random unknown<br>
    Div two to overlap. Random unknown<br>

    </div>

    <!-- ... --->

    <footer>
        Footer must be below all divs
    </footer>
</div>

<强>限制：

你必须知道div的宽度
您必须使用相同的宽度或使用左边距值作为前一个div的较大宽度的负值。

<强>解释

浮动元素并排放置。如果使用margin-left的负值，它将覆盖在前一个div上。然后为页脚设置clear属性，使页脚保持在底部的所有div。

如何强制div相互重叠，但有高度？

2 个答案: