Please what is the problem that whenever I try to position (fixed/relative/absolute) the elements everything will collapse?

Question

I just want to position fixed all the elements that made up the header, how should I do it please?

https://code.sololearn.com/W5WEq9XgmVrt/?ref=app

Answer 1

You mean, so that the header stays at the top even if you scroll down?

Try this:

header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
}

Answer 2

It worked, thanks a lot.
But please can you explain what the 'top:0; left:0; and the vw' mean??

Answer 3

`position: fixed` removes the element from their normal position, and you have to explicitly say where you want to fix it.

`top: 0; left: 0` means, zero pixels from the top of the viewport and zero pixels from the left of the viewport. In other words, we fix the element to the top left corner.

`vw` means "viewport width", or in other words, how ever wide your smartphone or browser is. You give a percentage value from 0-100, so `100vw` means, make it as wide as the entire screen.

Setting the width is important for fixed position too: usually elements will take up as much space as the parent element has available, but a fixed element is kinda removed from the normal flow and does not have a parent element in the same way, so you need to give it a width explicitly.

Answer 4

Schindlabua This really helped so much! I appreciate it🤗