Как правильно настроить расположение блоков с использованием абсолютного позиционирования таким образом, чтобы они находились друг под другом?

Как можно исправить код, чтобы текст "123" не налазил на текст "qwerty" в результате?
  • 21 февраля 2024 г. 15:18
Ответы на вопрос 2
Для того чтобы расположить блоки друг под другом с использованием абсолютного позиционирования, можно задать каждому блоку свой отдельный класс, где будут указаны координаты top и left для каждого блока. Например:

HTML:
```html
<div class="block1">123</div>
<div class="block2">qwerty</div>
```

CSS:
```css
.block1 {
  position: absolute;
  top: 0;
  left: 0;
}

.block2 {
  position: absolute;
  top: 20px;
  left: 0;
}
```

Изменение отступа top для второго блока позволит разместить его ниже первого блока, чтобы они не перекрывались.

Чтобы избежать наложения текста "123" на текст "qwerty", можно добавить отступы между блоками с помощью свойства margin или padding. Например:

```css
.block1 {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 20px;
}

.block2 {
  position: absolute;
  top: 30px;
  left: 0;
}
```

Таким образом, добавив отступ между блоками, можно избежать их перекрытия.
<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>
Похожие вопросы