0

Сейчас при отключении стилей, сверху идёт шапка меню и прочее. Нужно чтобы при отключении стилей на первом месте шел контент, а шапку, меню и остальное сместить вниз. Каким образом это реализовать можно?

2
  • 1
    Добавьте в ваш вопрос код со стилями, чтобы пользователи могли дать хороший ответ.
    – Yuri
    5 мар 2017 в 14:41
  • Я даже и не знаю, что добавлять. Мне нужны способы реализации идеи описанной выше. Увидел на одном сайте данную идею через отступы, в html контент идёт на первом месте, затем уже шапка. Шапке задается абсолютное позиционирование с координатами top: 0 , а контенту отступ сверху равный высоте контента. Немного странный способ на мой взгляд, поэтому решил спросить здесь 5 мар 2017 в 14:46

1 ответ 1

4

Есть несколько вариантов.

1) Если у вас меню и шапка сделана с position: absolute/fixed:

document.querySelector('.off-styles').onclick = function() {
  document.body.classList.add('offstyle');
};
p {
  margin: 0
}

body:not(.offstyle) .cap {
  position: absolute;
  top: 0;
  height: 20px;
}

body:not(.offstyle) .menu {
  position: absolute;
  top: 20px;
  height: 20px;
}

body:not(.offstyle) .content {
  margin-top: 40px;
}
<p class="content">Контент</p>
<p class="cap">Шапка</p>
<p class="menu">Меню</p>
<p class="other">Остальное</p>

<button class="off-styles">Отключить стили</button>

2) Способ довольно гибкий. С помощью flexbox и стиля order:

document.querySelector('.off-styles').onclick = function() {
  document.body.classList.add('offstyle');
};
p {
  margin: 0;
  width: 100%
}

body:not(.offstyle) .flexbox {
  display: flex;
  flex-wrap: wrap
}

body:not(.offstyle) .cap {
  order: 0;
}

body:not(.offstyle) .menu {
  order: 1;
}

body:not(.offstyle) .content {
  order: 2;
}

body:not(.offstyle) .other {
  order: 3;
}
<div class="flexbox">
  <p class="content">Контент</p>
  <p class="cap">Шапка</p>
  <p class="menu">Меню</p>
  <p class="other">Остальное</p>
</div>

<button class="off-styles">Отключить стили</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.