Как расположить блоки с абсолютном позиционированием друг под другом?
<div style="position: absolute;">qwerty</div> <div>123</div> |
<div style="position: absolute;">qwerty</div> <div>123</div>
имею такой код
получаю такой результат
как получить такой результат
при этом оставив блок qwerty с абсолютном позиционированием?
Дополнительно:
Ответы:
<div style="position: absolute;"> <div>qwerty</div> <div>123</div> </div> |
<div style="position: absolute;"> <div>qwerty</div> <div>123</div> </div>
Если вдруг querty это типа шапка сайта фиксированная, то вместо absolute задать ей sticky
<div style="position: sticky; top: 0;">qwerty</div> <div>123</div> |
<div style="position: sticky; top: 0;">qwerty</div> <div>123</div>
Тег <br> - перенос строки.
<div style="position: absolute;">qwerty</div><br> <div>123</div> |
<div style="position: absolute;">qwerty</div><br> <div>123</div>
- Ну-ну
- Я хотя бы проверил результат, прежде чем писать. Так что в своем ответе уверен. Но допущу, что у вас параллельная реальность. :)
- Вот еще варианты:
<div style="position: absolute;">qwerty</div> <p></p> <div>123</div>
<div style="position: absolute;">qwerty</div> <p></p> <div>123</div>
<div style="position: absolute;">qwerty</div> <div></div> <div>123</div>
<div style="position: absolute;">qwerty</div> <div></div> <div>123</div>
<div style="position: absolute;">qwerty</div> <td></td> <div>123</div>
<div style="position: absolute;">qwerty</div> <td></td> <div>123</div>
В разных случаях, получается разный результат. Где-то работает, где-то - нет. :/
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для расположения блоков с абсолютным позиционированием друг под другом, вам нужно использовать свойство CSS `top` для указания верхней границы блока и `bottom` для указания нижней границы блока. Также не забудьте использовать `position: absolute` для каждого блока.
Пример кода на HTML и CSS:
<div class="container"> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> </div>
.container { position: relative; } .block1 { position: absolute; top: 0; width: 100%; height: 100px; background-color: red; } .block2 { position: absolute; top: 110px; width: 100%; height: 100px; background-color: blue; } .block3 { position: absolute; top: 220px; width: 100%; height: 100px; background-color: green; }
В данном примере блоки `block1`, `block2` и `block3` будут расположены друг под другом внутри контейнера `container`. При указании разных значений для свойств `top` вы можете регулировать расстояние между блоками.
Убедитесь, что контейнер имеет свойство `position: relative`, чтобы блоки с абсолютным позиционированием относились к этому контейнеру. Используйте высоту и ширину для каждого блока, чтобы определить их размеры.