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

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

0 голосов
/ 21 сентября 2018

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

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

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

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

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

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

Спасибо

1 Ответ

0 голосов
/ 22 сентября 2018

Да, это возможно.Но решение немного хакерское.Если бы у вас была возможность изменить 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>
...