Now when you turn off styles, there is a menu heading on top and so on. It is necessary that when disconnecting styles, content was in the first place, and the header, menu, and the rest were moved down. How can this be implemented?

  • one
    Add code with styles to your question so that users can give a good answer. - Yuri
  • I do not even know what to add. I need ways to implement the idea described above. I saw this idea through indentation on one site, in html content comes first, then the header. The cap is given absolute positioning with the coordinates top: 0, and the content indented from above is equal to the height of the content. A little strange way in my opinion, so I decided to ask here - YourDeveloper

1 answer 1

There are several options.

1) If your menu and header is made with 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) The method is quite flexible. Using flexbox and order style :

 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>