blocks|key|1381345|text|根据需要放置外部div，然后使用absolute定位内部div。它们都会堆叠在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381346|​|1381347|.inner+{
++position:+absolute;
}|code-block|syntax|javascript|1381348|<div+class="outer">
+++<div+class="inner">1</div>
+++<div+class="inner">2</div>
+++<div+class="inner">3</div>
+++<div+class="inner">4</div>
</div>|1381349|1381350|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.inner {
  position: absolute;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
   &lt;div class="inner"&gt;1&lt;/div&gt;
   &lt;div class="inner"&gt;2&lt;/div&gt;
   &lt;div class="inner"&gt;3&lt;/div&gt;
   &lt;div class="inner"&gt;4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1381369|text|补充一下戴夫的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381370|div+{+position:+relative;+}
div+div+{+position:+absolute;+top:+0;+left:+0;+}|code-block|syntax|javascript|1381371|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To add to Dave's answer:</p>

<pre><code>div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
</code></pre>


blocks|key|1166668|text|你现在可以使用CSS+Grid来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1166669|<div+class="outer">
++<div+class="top">+</div>
++<div+class="below">+</div>
</div>|code-block|syntax|javascript|1166670|以及用于此的css：|1166671|.outer+{
++display:+grid;
++grid-template:+1fr+/+1fr;
++place-items:+center;
}
.outer+>+*+{
++grid-column:+1+/+1;
++grid-row:+1+/+1;
}
.outer+.below+{
++z-index:+2;
}
.outer+.top+{
++z-index:+1;
}|1166672|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can now use CSS Grid to fix this.</p>

<pre><code>&lt;div class="outer"&gt;
  &lt;div class="top"&gt; &lt;/div&gt;
  &lt;div class="below"&gt; &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the css for this:</p>

<pre><code>.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer &gt; * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}
</code></pre>


blocks|key|1381429|text|如果您的意思是将一个放在另一个的顶部，一个放在顶部(相同的X，Y位置，但不同的Z位置)，请尝试使用z-index+CSS属性。这应该可以工作(未测试)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1381430|<div>
++++<div+style='z-index:+1'>1</div>
++++<div+style='z-index:+2'>2</div>
++++<div+style='z-index:+3'>3</div>
++++<div+style='z-index:+4'>4</div>
</div>|code-block|syntax|javascript|1381431|这应该在3的顶部显示4，在2的顶部显示3，依此类推。Z索引越高，元素在z轴上的位置就越高。我希望这对您有帮助:)|1381432|entityMap^0|1D|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>If you mean by literally putting one on the top of the other, one on the top (Same X, Y positions, but different Z position), try using the <code>z-index</code> CSS attribute. This should work (untested)</p>

<pre><code>&lt;div&gt;
    &lt;div style='z-index: 1'&gt;1&lt;/div&gt;
    &lt;div style='z-index: 2'&gt;2&lt;/div&gt;
    &lt;div style='z-index: 3'&gt;3&lt;/div&gt;
    &lt;div style='z-index: 4'&gt;4&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This should show 4 on the top of 3, 3 on the top of 2, and so on. The higher the z-index is, the higher the element is positioned on the z-axis. I hope this helped you :)</p>


blocks|key|1166700|text|所有的答案似乎都很陈旧:)我更喜欢CSS+grid以获得更好的页面布局(absolute+div可以被页面中的其他div覆盖)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1166701|<div+class="container">
++<div+class="inner"+style="background-color:+white;"></div>
++<div+class="inner"+style="background-color:+red;"></div>
++<div+class="inner"+style="background-color:+green;"></div>
++<div+class="inner"+style="background-color:+blue;"></div>
++<div+class="inner"+style="background-color:+purple;"></div>
</div>

<style>
.container+{
++width:+300px;
++height:+300px;
++margin:+0+auto;
++background-color:+yellow;
++/*+important+part+*/
++display:+grid;
++place-items:+center;
++grid-template-areas:
++++++++++++++++++"inner-div";
}

.inner+{
++height:+100px;
++width:+100px;
++/*+important+part+*/
++grid-area:+inner-div;
}
</style>|code-block|syntax|javascript|1166702|如果你用CSS隐藏紫色的div，你会看到蓝色的div在顶部。|1166703|下面是一个有效的link|1166704|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/qg70bfdt/^0|10|8|0|0|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>All the answers seem pretty old :) I'd prefer CSS grid for a better page layout (<code>absolute</code> divs can be overridden by other divs in the page.)</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;inner&quot; style=&quot;background-color: white;&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;inner&quot; style=&quot;background-color: red;&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;inner&quot; style=&quot;background-color: green;&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;inner&quot; style=&quot;background-color: blue;&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;inner&quot; style=&quot;background-color: purple;&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: yellow;
  /* important part */
  display: grid;
  place-items: center;
  grid-template-areas:
                  &quot;inner-div&quot;;
}

.inner {
  height: 100px;
  width: 100px;
  /* important part */
  grid-area: inner-div;
}
&lt;/style&gt;
</code></pre>
<p>If you hide the purple div with CSS, you'll see the blue div is at the top.</p>
<p>Here's a working <a href="https://jsfiddle.net/qg70bfdt/" rel="nofollow noreferrer">link</a></p>


blocks|key|1381307|text|style="position:absolute"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1381308|entityMap^0|0|P|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>style="position:absolute"</code></p>


blocks|key|1166641|text|我将div放置在略微偏移的位置，以便您可以在工作时看到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1166642|HTML|1166643|<div+class="outer">
++<div+class="bot">BOT</div>
++<div+class="top">TOP</div>
</div>|code-block|syntax|javascript|1166644|CSS|1166645|.outer+{
++position:+relative;
++margin-top:+20px;
}

.top+{
++position:+absolute;
++margin-top:+-10px;
++background-color:+green;
}

.bot+{
++position:+absolute;
++background-color:+yellow;
}|1166646|https://codepen.io/anon/pen/EXxKzP|offset|length|1166647|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|Y|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

<p>I positioned the divs slightly offset, so that you can see it at work.<br>
HTML</p>

<pre><code>&lt;div class="outer"&gt;
  &lt;div class="bot"&gt;BOT&lt;/div&gt;
  &lt;div class="top"&gt;TOP&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}
</code></pre>

<p><a href="https://codepen.io/anon/pen/EXxKzP" rel="nofollow noreferrer">https://codepen.io/anon/pen/EXxKzP</a></p>


blocks|key|1381518|text|我有相同的要求，我已经尝试在下面的小提琴。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381519|#container1+{
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2+{
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container+{
position+:+relative;
height:350px;
width:350px;
background-color:yellow;
}|code-block|syntax|javascript|1381520|https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview|offset|length|1381521|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>I had the same requirement which i have tried in below fiddle.</p>

<pre><code>#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}
</code></pre>

<p><a href="https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview</a></p>


blocks|key|1381488|text|我知道这篇文章有点老了，但我也遇到了同样的问题，我试着修复了几个小时。最后我找到了解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1381489|如果我们有两个绝对位置的盒子|1381490|<div+style='left:+100px;+top:+100px;+position:+absolute;+width:+200px;+height:+200px;'></div>
<div+style='left:+100px;+top:+100px;+position:+absolute;+width:+200px;+height:+200px;'></div>|code-block|syntax|javascript|1381491|我们确实希望屏幕上会有一个框。要做到这一点，我们必须将margin+bottom设置为等于-height，如下所示：|1381492|<div+style='left:+100px;+top:+100px;+position:+absolute;+width:+200px;+height:+200px;+margin-bottom:+-200px;'></div>
<div+style='left:+100px;+top:+100px;+position:+absolute;+width:+200px;+height:+200px;+margin-bottom:+-200px;'></div>|1381493|对我来说很好。|1381494|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I know that this post is a little old but I had the same problem and tried to fix it several hours. Finally I found the solution:</p>

<p>if we have 2 boxes positioned absolue</p>

<pre><code>&lt;div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'&gt;&lt;/div&gt;
&lt;div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'&gt;&lt;/div&gt;
</code></pre>

<p>we do expect that there will be one box on the screen. To do that we must set margin-bottom equal to -height, so doing like this:</p>

<pre><code>&lt;div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'&gt;&lt;/div&gt;
&lt;div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'&gt;&lt;/div&gt;
</code></pre>

<p>works fine for me.</p>


<p>Is it possible to stack up multiple DIVs like:</p>

<pre><code>&lt;div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>I have a feeling some sort of float or display or other trick could bite?</p>

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


Stacking DIVs on top of each other?

是否可以堆叠多个DIVs，如：<div><div></div><div></div><div></div><div></div></div>这样所有的内部DIVs都有相同的X和Y位置？默认情况下，它们都位于彼此下方，将Y位置增加最后一个DIV的高度。我有一种感觉，某种花车或显示器或其他技巧可能会产生影响？编辑:父DIV具有相对位置，因此，使用绝对位置似乎不起作用。

问将DIVs堆叠在一起？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将DIVs堆叠在一起？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将DIVs堆叠在一起？
EN