укладывать div друг на друга?

<p>можно ли составить несколько div, например:</p><pre><code><div> <div></div> <div></div> <div></div> <div></div> </div> </code></pre><p>так что все эти внутренние div имеют одинаковую позицию x и y? по умолчанию они все идут ниже друг друга, увеличивая положение y на высоту последнего предыдущего div.</p><p>у меня есть чувство, что какой-то поплавок или дисплей или другой трюк может укусить?</p><p>правка: родительский div имеет относительное положение, поэтому использование абсолютного положения, кажется, не работает.</p>

<p>расположите внешний div как хотите, затем разместите внутренний div, используя абсолют. они все сложатся.</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><div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> </div></code></pre></div> </div>

<p>чтобы добавить к ответу дейва:</p><pre><code>div { position: relative; } div div { position: absolute; top: 0; left: 0; } </code></pre>

<p>я расположил элементы div немного смещенными, чтобы вы могли видеть это на работе.<br> html</p><pre><code><div class="outer"> <div class="bot">bot</div> <div class="top">top</div> </div> </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">https://codepen.io/anon/pen/exxkzp</a> </p>

<p>если вы имеете в виду буквальное размещение одного поверх другого, одного сверху (те же позиции x, y, но разные z), попробуйте использовать css-атрибут <code>z-index</code>. это должно работать (не проверено)</p><pre><code><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></pre><p>это должно показать 4 сверху 3, 3 сверху 2 и так далее. чем выше z-индекс, тем выше элемент расположен на оси z. я надеюсь, что это помогло вам :)</p>

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

<p>у меня было то же самое требование, которое я попробовал в скрипке ниже.</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">https://plnkr.co/edit/xnlnerflvo1pb92uxcc6?p=preview</a> </p>

<p>я знаю, что этот пост немного старый, но у меня была та же проблема, и я пытался ее исправить несколько часов. наконец я нашел решение:</p><p>если у нас 2 коробки позиционируются абсолютом</p><pre><code><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></pre><p>мы ожидаем, что на экране будет одна коробка. для этого мы должны установить margin-bottom равным -height, делая это так:</p><pre><code><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> </code></pre><p>у меня отлично работает.</p>