Переместить весь HTML-контент страницы вниз?

Question

Я хочу вставить заголовок на страницу, используя JavaScript. Я не хочу ничего скрывать от исходного контента, а просто добавить заголовок выше, который исправлен. Имейте в виду, что я не знаю содержимого страницы, которой я пытаюсь манипулировать.

Я попытался добавить поле margin-top к элементу body:

body{
  margin-top: 40px;
}

Но если естьлюбые элементы с фиксированной позицией:

.header{
   position: fixed;
   top: 0;
}

Они останутся в верхней части страницы.

У вас есть предложения?

Answer 1

Попробуйте

body{
  padding-top: 40px;
}
header {
  position: fixed;
  top: 40px;
}

Answer 2

Решением было перебрать элементы и найти те, которые имеют фиксированное положение.

function moveDownFixedElements(){
let elems = document.body.getElementsByTagName("*");

for (let i = 0; i < elems.length ; i++) {
    if (window.getComputedStyle(elems[i], null).getPropertyValue('position') === 'fixed') {
        let style = window.getComputedStyle(elems[i]);
        let top = style.getPropertyValue('top');
        top = parseInt(top) + 40 + "px";
        elems[i].style.top = top; 
    }
}
}

Теперь, не зная структуры страницы, я могу вставить что-то поверх нее.

РЕДАКТИРОВАТЬ: Другое действительно простое решение - использовать свойство transform.

document.body.style.transform = "translateY(40px)";