CSS：如何将两个元素放在一起，而不指定高度？
我有两个DIV，我需要完全相互重叠。 但是，当我这样做时，格式化全部搞砸了，因为包含DIV的行为就像没有高度。 我认为这是预期的行为与position:absolute但我需要find一种方法来定位这两个元素在彼此的顶部，并在内容延伸容器拉伸：
.layer2左上边缘应该与layer1左上边缘完全alignment
<!-- 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 top: 0; left: 0到你的两个绝对定位的元素的CSS。 如果您希望将绝对定位的元素相对于它们的父级而不是文档的主体进行定位，则还需要拥有position: relative on .container_row ：
如果元素具有“position：absolute”，那么包含区块由最近的祖先build立，并且具有“绝对”，“相对”或“固定”的“位置”。
你的问题是这个position: absolute从正常stream程中移除元素 ：
它完全从正常stream程中移除（对后来的兄弟姐妹没有影响）。 一个绝对定位的盒子为普通儿童和绝对（但不是固定的）后代build立一个新的包含区块。 但是，绝对定位元素的内容不会在其他任何框中stream动。
这意味着绝对定位的元素对其父元素的大小没有任何影响，并且您的第一个<div class="container_row">将具有零高度。
所以你不能做你想要做的绝对定位的元素，除非你知道他们会有多高（或者，等价地，你可以指定他们的身高）。 如果你可以指定高度，那么你可以把相同的高度放在.container_row ，一切都会排成一列。 您也可以在第二个.container_row上放置一个margin-top ，为绝对定位的元素留出空间。 例如：
很好的答案，“亩太短”。 我正在寻找完全相同的东西，阅读您的文章后，我发现一个解决scheme，我的问题。
我有两个完全相同大小的元素，并想堆叠它们。 由于每个人都有相同的规模，我能做的就是做出来
position: absolute; top: 0px; left: 0px;
只有最后一个元素。 这样第一个元素插入正确，“推”父母的高度，第二个元素放置在顶部。
希望这可以帮助其他人试图堆叠相同（未知）高度的2+元素。
由于绝对定位从文档stream程中删除元素：绝对不是工作的正确工具。 根据您想要创build的确切布局，您将成功使用负边距，位置：相对或甚至是变换：平移。 向我们展示一个你想做的样品，我们可以帮助你更好。
当然，问题的关键在于如何让身高恢复。 但是如果你事先不知道高度，你怎么能这样做？ 那么，如果你知道什么样的比例你想给容器（并保持它的响应），你可以通过添加填充到容器的另一个孩子，以百分比表示你的高度。
你甚至可以在容器中添加一个虚拟的div ，并设置如padding-top: 56.25%来给虚拟元素一个高度，该高度是容器宽度的一部分。 这将推出容器，并给它一个长宽比，在这种情况下，16：9（56.25％）。
填充和边距使用宽度的百分比，这真是这里的诀窍。
我必须设置
Container_height = Element1_height = Element2_height
.Container { position: relative; } .ElementOne, .Container ,.ElementTwo{ width: 283px; height: 71px; } .ElementOne { position:absolute; } .ElementTwo{ position:absolute; }
使用可以使用z-index来设置哪一个在最上面。
