Перекрытие контента с использованием позиции относительного / абсолютного

Question

У меня есть следующий код, где main Содержимое отображается в верхней части заголовка.

Можно ли это исправить, не добавляя стиль к тегу main?

header {
  position: relative; 
}

.left {
  position: absolute;
  left: 0;
}

.right {
  position: absolute;
  right: 0;
}

<header>
  <div class="left">Left</div>
  <div class="right">Right</h1>
</header>
<main>
  Content
 </main>

Answer 1

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

Здесь, поскольку вы установили абсолютно все содержимое <header> в отношении механизма компоновки, внутри ничего нет <header>, поэтому его высота будет равна нулю. Это приводит к тому, что <main> располагается в самом верху, потому что над ним ничего не занимает место.

Если вам нужен заголовок с некоторым содержимым слева, а другим справа, рассмотрите возможность использования flexbox или CSS сетка, чтобы выложить содержимое <header>. Абсолютное позиционирование не является правильным способом сделать это.

Answer 2

Вы можете использовать поплавки вместо абсолютного позиционирования:

main {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

<header>
  <div class="left">Left</div>
  <div class="right">Right</h1>
</header>
<main>
  Content
</main>