By default positioning, if everything’s positioned relative, the header will scroll together with the sibling below it, in this case i called it main, what if the header is positioned fixed with unknown height, the main automatically goes up, how do you add the margin-top value for the main that is equal to the header’s height without using Javascript? is it possible with pure css?
HTML:
<header>
logo and navigation here
</header>
<main>
content here
<main>
CSS:
header { position: fixed; width: 100%; z-index: 100; }
main { margin-top: unknown value based on header's height }