+ 2

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

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

4th Sep 2022, 6:40 PM
TheBubble001
TheBubble001 - avatar
4 odpowiedzi
+ 3
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; }
4th Sep 2022, 7:38 PM
Schindlabua
Schindlabua - avatar
+ 2
It worked, thanks a lot. But please can you explain what the 'top:0; left:0; and the vw' mean??
4th Sep 2022, 9:49 PM
TheBubble001
TheBubble001 - avatar
+ 2
`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.
5th Sep 2022, 5:26 AM
Schindlabua
Schindlabua - avatar
+ 2
Schindlabua This really helped so much! I appreciate it🤗
5th Sep 2022, 6:25 AM
TheBubble001
TheBubble001 - avatar