Ставить DIV друг на друга?

116

Можно ли сложить несколько DIV, например:

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

Так что все эти внутренние DIV имеют одинаковую позицию X и Y? По умолчанию все они располагаются ниже друг друга, увеличивая позицию Y на высоту последнего предыдущего DIV.

У меня такое ощущение, что какой-то поплавок, дисплей или другой трюк может укусить?

РЕДАКТИРОВАТЬ: родительский DIV имеет относительную позицию, поэтому использование абсолютной позиции, похоже, не работает.

css html stack css-float башня
источник

Чтобы прояснить мой ответ, вы хотите абсолютно позиционировать внутренние div.

Мэтт,

Связанный: stackoverflow.com/q/2941189/435605

AlikElzin-kilaka

168

Расположите внешний div, как хотите, а затем разместите внутренние div, используя absolute. Они все сложатся.

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

Развернуть фрагмент

Мэтт
источник

1

Похоже, это не работает. Возможно, мне следовало упомянуть, что у меня есть такой сценарий: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> сложите этот </div> <div> стек это </div> <div> сложите это </div> <div> сложите это </div> </div> </div>

Башня

2

Вы хотите абсолютно позиционировать div, в которых есть "stack this". Это действительно работает - я пробовал это перед тем, как выложить свой оригинал. Если вы не помещаете селекторы классов в свои div, адаптируйте метод выбора div в ответе Эрика, чтобы выбрать div стека.

Мэтт,

1

У меня тоже не вышло. Слишком много неприятностей осталось перед зрителями.

Ян Беллаванс

Я получил блоки для стека с использованием позиции: относительная и с указанием высоты

Ян Беллаванс

это может быть связано с опорой дисплея?

Ян Беллаванс

50

Чтобы добавить к ответу Дэйва:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Эрик Венделин
источник

Похоже, это не работает. Возможно, мне следовало упомянуть, что у меня есть такой сценарий: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> сложите этот </div> <div> стек это </div> <div> сложите это </div> <div> сложите это </div> </div> </div>

Башня

Я думаю, что в этом случае вы хотите установить «top: 0; left: 0;» на вашем div, который имеет "position: relative". Определенно протестируйте IE6 на этом, хотя я не могу сказать наверняка, что это будет работать.

Эрик Венделин,

10

Если вы имеете в виду буквально поместить один поверх другого, один сверху (те же позиции X, Y, но разные позиции Z), попробуйте использовать z-indexатрибут CSS. Это должно работать (непроверено)

<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>

Это должно показать 4 сверху 3, 3 сверху 2 и так далее. Чем выше z-index, тем выше расположен элемент по оси z. Надеюсь, это вам помогло :)

Джимми Лин
источник

6

style="position:absolute"

Дэйв Сверски
источник

5

Я расположил блоки с небольшим смещением, чтобы вы могли видеть его в работе.
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

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

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

nycynik
источник

5

Теперь вы можете использовать CSS Grid, чтобы исправить это.

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

И css для этого:

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

Моисей Гитау
источник

0

Я знаю, что эта публикация немного устарела, но у меня была та же проблема, и я пытался ее исправить несколько часов. Наконец я нашел решение:

если у нас есть 2 коробки, расположенные абсолю

<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>

мы действительно ожидаем, что на экране будет одно поле. Для этого мы должны установить margin-bottom равным -height, как показано ниже:

<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>

у меня отлично работает.

Кшиштоф Ярош
источник

0

У меня было то же требование, которое я пробовал в скрипке ниже.

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

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

Рафаэль
источник

Ставить DIV друг на друга?

Ответы: