我有两个DIV,我需要将它们精确地放在彼此的顶部。但是,当我这样做时,格式化就搞砸了,因为包含DIV的行为就像没有高度一样。我认为这是position:absolute
的预期行为,但我需要找到一种方法来将这两个元素彼此重叠放置,并使容器随着内容的延伸而伸展:
.layer2
的左上边缘应与layer1
的左上边缘完全对齐
<!-- HTML -->
<div class="container_row">
<div class="layer1">
Lorem ipsum...
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
/* CSS */
.container_row {}
.layer1 {
position:absolute;
z-index: 1;
}
.layer2 {
position:absolute;
z-index: 2;
}
首先,您确实应该将位置包括在绝对定位的元素上,否则您将遇到奇怪而令人困惑的行为;您可能想为两个绝对定位的元素添加top: 0; left: 0
至CSS。如果您想将绝对定位的元素定位在position: relative
上,则还需要在.container_row
上使用with respect to their parent rather than the document's body:
[如果元素具有'位置:绝对',则包含块由最近的祖先建立,其'位置'为'绝对','相对'或'固定'...
您的问题是position: absolute
removes elements from the normal flow:
将其从正常流中完全删除(它对以后的同级没有影响)。绝对定位的框为正常流子和绝对(但不固定)定位的后代建立了一个新的容纳块。但是,绝对定位的元素的内容不会在其他任何框内流动。
这意味着绝对定位的元素对其父元素的大小没有任何影响,并且您的第一个position: absolute
的高度为零。
因此,如果您不知道绝对定位的元素的高度(或者等效地,可以指定其高度),则无法使用绝对定位的元素进行操作。如果您可以指定高度,则可以在<div class="container_row">
上放置相同的高度,所有内容都会对齐;您也可以在第二个.container_row
上放置一个margin-top
,为绝对定位的元素留出空间。例如:
.container_row
实际上,没有位置http://jsfiddle.net/ambiguous/zVBDc/并指定任何高度也是可能的。所有您需要做的是在父元素上使用absolute
并将后代放入同一行和同一列。
请根据您的HTML查看下面的示例。我只添加了display: grid
和一些颜色,所以您可以看到结果。
您还可以轻松地更改每个后代元素的<span>
,以控制其可见性(该元素应位于顶部)。
z-index
.container_row{
display: grid;
}
.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}
.layer1 span{
color: #fff;
background: #000cf6;
}
.layer2{
background: rgba(255, 0, 0, 0.4);
}
很好的答案,“亩太短了”。我正在寻找完全相同的东西,在阅读您的帖子后,我找到了适合我问题的解决方案。
我有两个大小完全相同的元素,想要堆叠它们。由于每个都有相同的尺寸,所以我可以做的是
<div class="container_row">
<div class="layer1">
<span>Lorem ipsum...<br>Test test</span>
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
仅在最后一个元素上。这样,第一个元素正确插入,“推”父母的身高,第二个元素放置在顶部。
希望这有助于其他人尝试堆叠高度相同(未知)的2个以上元素。
我必须设置
Container_height = Element1_height = Element2_height
position: absolute;
top: 0px;
left: 0px;
使用可以使用z-index来设置哪个位于最前面。
这里是另一种使用display:flex而不是position:absolute或display:grid的解决方案。
.Container {
position: relative;
}
.ElementOne, .Container ,.ElementTwo{
width: 283px;
height: 71px;
}
.ElementOne {
position:absolute;
}
.ElementTwo{
position:absolute;
}
.container_row{
display: flex;
}
.layer1 {
width: 100%;
background-color: rgba(255,0,0,0.5); // red
}
.layer2{
width: 100%;
margin-left: -100%;
background-color: rgba(0,0,255,0.5); // blue
}
由于采用绝对定位,因此从文档流送位置中删除了元素:绝对不是适合此工作的工具。根据要创建的确切布局,您可以使用负边距,position:relative甚至transform:translation实现成功。向我们显示您想做什么的样本,我们可以为您提供更好的帮助。
当然,问题全在于恢复身高。但是如果您不提前知道身高怎么办?好吧,如果您知道要为容器提供什么宽高比(并保持其响应速度),则可以通过向容器的另一个子元素中添加填充(以百分比表示)来恢复身高。
您甚至可以向容器中添加虚拟<div class="container_row">
<div class="layer1">
<span>Lorem ipsum...</span>
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
,并设置类似div
的值,以使虚拟元素的高度与容器的宽度成比例。这将推出容器并赋予其长宽比,在这种情况下为16:9(56.25%)。
填充和边距使用宽度的百分比,在这里确实是诀窍。
经过大量的测试,我已经证实原来的问题已经正确;缺少几个设置:
padding-top: 56.25%
必须具有container_row
position: relative;
position: absolute; left:0;
应具有其他样式:container_row
height:x; line-height:x; vertical-align:middle;
也可以提供帮助。这里有一些可重用的css,它将在不使用text-align:center;
的情况下保留每个元素的高度:
position: absolute
.stack {
display: grid;
}
.stack > * {
grid-row: 1;
grid-column: 1;
}
中的第一个元素是背景,第二个是前景。