Как получить заголовок за пределами его плавающего основного div и разместить его на всю ширину в верхней части страницы

Question

У меня есть общая HTML-структура, состоящая из плавающей строки шириной 73% слева, содержащей несколько элементов, один из которых является заголовком. И 23% ширины плавающей правой боковой панели.

<div class="primary">
    <header>
    </header>
</div>

<div class="sidebar">
</div>

Можно ли получить заголовок (который вложен в первый div), перейти в верхнюю часть страницы на всю ширину и отобразить под этим родительским div слева, а боковую панель - справа?

Все это без необходимости изменять структуру HTML и получать заголовок вне родительского div.

По сути, у меня есть то, что есть, но я бы хотел получить то, что хотел бы, не меняя структуру.

Спасибо

Answer 1

Да, это возможно. Но решение немного хакерское. Если бы у вас была возможность изменить html, это было бы лучше, но если нет, то вы идете:

Сделать тело, position: relative; и установите заголовок position:absolute, Теперь вы можете перемещать заголовок в любом месте относительно тела.

Если вы добавите margin-top к телу, то у вас будет пробел, где вы можете расположить свой заголовок. Установите ширину заголовка равной 100%, установите для заголовка высоту, соответствующую размеру поля, который вы дали телу, и штанге.

Есть и другие способы сделать это, но это один.

body {
  position: relative;
  margin:0;
  margin-top: 50px;
  width: 100%;
}

div.primary {
  width:73%;
  float:left;
  background-color: yellow;
  color:black;
  text-align:center;
  font-size: 2em;
}

div.sidebar{
  float:right;
  width: 23%;
  background-color: red;
  text-align:center;
  font-size: 2em;
}

header {
  box-sizing: border-box;
  width: 100vw;
  top: -50px;
  left: 0;
  background-color: lightblue;
  position: absolute;
  height: 50px;
}

p {
  text-align: center;
}

<div class="primary">
    PRIMARY
    <header>
        HEADER
    </header>
</div>

<div class="sidebar">
    SIDEBAR
</div>