将DIV堆叠在一起? [英] Stacking DIVs on top of each other?

问题描述

是否可以堆叠多个 DIV，例如:

<div></div><div></div><div></div><div></div></div>

所以所有这些内部 DIV 都具有相同的 X 和 Y 位置?默认情况下，它们都在彼此下方，将 Y 位置增加上一个 DIV 的高度.

我觉得某种浮动或展示或其他技巧可能会咬人?

父 DIV 具有相对位置，因此，使用绝对位置似乎不起作用.

解决方案

根据需要定位外部 div，然后使用绝对定位内部 div.它们都会堆积起来.

.inner {位置:绝对；}

<div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div><div class="inner">4</div></div>

Is it possible to stack up multiple DIVs like:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

So that all those inner DIVs have the same X and Y position? By default they all go below each other increasing the Y position by the height of the last previous DIV.

I have a feeling some sort of float or display or other trick could bite?

EDIT: The parent DIV has position relative, so, using position absolute does not seem to work.

解决方案

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

这篇关于将DIV堆叠在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！