CSS:如何在不指定高度的情况下将两个元素放在一起?

I have two DIVs that I need to position exactly on top of each other. However, when I do that, the formatting gets all screwed up because the containing DIV acts like there is no height. I think this is the expected behavior with position:absolute but I need to find a way to position these two elements on top of each other and have the container stretch as the content stretches:

我有两个div，我需要精确地放置在彼此的上方。但是，当我这样做的时候，格式就完全搞砸了，因为包含DIV的操作看起来没有高度。我认为这是位置的期望行为:绝对的，但我需要找到一种方法，将这两个元素放在一起，让容器随着内容的拉伸而拉伸:

The top left edge of .layer2 should be exactly aligned to the top left edge of layer1

.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;
}

6 个解决方案

#1

First of all, you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior; you probably want to add top: 0; left: 0 to the CSS for both of your absolutely positioned elements. You'll also want to have position: relative on .container_row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document's body:

首先，你真的应该包含绝对定位元素的位置否则你会遇到奇怪和混乱的行为;你可能想要加上顶部:0;左:0到CSS为您的两个绝对定位元素。如果您想要绝对定位的元素相对于它们的父元素而不是文档的主体进行定位，您还需要在.container_row上设置:relative on .container_row:

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...

如果元素具有'position: absolute'，则包含的块由最近的祖先以'absolute'、'relative'或'fixed'…

Your problem is that position: absolute removes elements from the normal flow:

您的问题是这个位置:绝对移除正常流程中的元素:

It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.

它被完全从正常的流中删除(它对以后的兄弟流没有影响)。一个绝对定位框为正常流子程序和绝对(但不是固定)定位子程序建立一个新的包含块。但是，绝对定位元素的内容不会在任何其他框中流动。

This means that absolutely positioned elements have no effect whatsoever on their parent element's size and your first <div class="container_row"> will have a height of zero.

这意味着绝对定位的元素对其父元素的大小没有任何影响，您的第一个

的高度将为零。

So you can't do what you're trying to do with absolutely positioned elements unless you know how tall they're going to be (or, equivalently, you can specify their height). If you can specify the heights then you can put the same heights on the .container_row and everything will line up; you could also put a margin-top on the second .container_row to leave room for the absolutely positioned elements. For example:

所以除非你知道它们有多高(或者，同样地，你可以指定它们的高度)，否则你就不能用绝对定位的元素做你想做的事。如果您可以指定高度，那么您可以在.container_row上设置相同的高度，所有内容都将对齐;您还可以在第二个.container_row上放置一个边距，以便为绝对定位的元素留出空间。例如:

http://jsfiddle.net/ambiguous/zVBDc/

http://jsfiddle.net/ambiguous/zVBDc/

#2

Great answer, "mu is too short". I was seeking the exact same thing, and after reading your post I found a solution that fitted my problem.

很好的回答，“mu太短了”。我也在寻找同样的东西，在阅读了你的文章后，我找到了一个适合我的问题的解决方案。

I was having two elements of the exact same size and wanted to stack them. As each have same size, what I could do was to make

我有两个相同大小的元素，想把它们叠起来。因为每个都有相同的尺寸，我能做的就是

position: absolute;
top: 0px;
left: 0px;

on only the last element. This way the first element is inserted correctly, "pushing" the parents height, and the second element is placed on top.

只有最后一个元素。这样，第一个元素被正确地插入，“推”父元素的高度，第二个元素被放在顶部。

Hopes this helps other people trying to stacking 2+ elements with same (unknown) height.

希望这能帮助其他人尝试用相同(未知)高度叠加2个以上的元素。

#3

Due to absolute positioning removing the elements from the document flow position: absolute is not the right tool for the job. Depending on the exact layout you want to create you will be successful using negative margins, position:relative or maybe even transform: translate. Show us a sample of what you want to do we can help you better.

由于从文档流位置删除元素的绝对位置:绝对不是正确的工具。根据您想要创建的确切布局，您将成功地使用负边距、位置:相对或甚至转换:translate。给我们一个你想做的事情的例子，我们可以更好地帮助你。

#4

I had to set

我已经设置

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

Use can use z-index to set which one to be on top.

使用可以使用z指数来设置哪个在上面。

#5

Of course, the problem is all about getting your height back. But how can you do that if you don't know the height ahead of time? Well, if you know what aspect ratio you want to give the container (and keep it responsive), you can get your height back by adding padding to another child of the container, expressed as a percentage.

当然，问题的关键是要让你的身高恢复。但是如果你事先不知道高度，你怎么能做到呢?如果您知道要给容器的纵横比(并保持它的响应)，您可以通过向容器的另一个子容器添加填充(以百分比表示)来恢复高度。

You can even add a dummy div to the container and set something like padding-top: 56.25% to give the dummy element a height that is a proportion of the container's width. This will push out the container and give it an aspect ratio, in this case 16:9 (56.25%).

您甚至可以向容器中添加一个虚拟div，并设置类似于padding-top的参数:56.25%，以便让虚拟元素具有与容器宽度成比例的高度。这将推出容器并给它一个纵横比，在本例中为16:9(56.25%)。

Padding and margin use the percentage of the width, that's really the trick here.

填充和边距使用宽度的百分比，这就是这里的技巧。

#6

After much testing, I have verified that the original question is already right; missing just a couple of settings:

经过多次测试，我已经验证了原来的问题已经正确了;只缺少几个设置:

the container_row MUST have position: relative;
container_row必须具有位置:相对;
the children (...), MUST have position: absolute; left:0;
孩子们(……)，必须有立场:绝对;左:0;
to make sure the children (...) align exactly over each other, the container_row should have additional styling:
- height:x; line-height:x; vertical-align:middle;
- 高度:x;行高:x;vertical-align:中间;
- text-align:center; could, also, help.
- text-align:中心;可能也有所帮助。
为了确保子元素(…)彼此对齐，container_row应该具有额外的样式:height:x;行高:x;vertical-align:中间;text-align:中心;可能也有所帮助。

#1