Hi,
I just had a look at FCCs solution for the technical documentation page under responsive web design here
I am struggling to wrap my head around “positioning” in css. Any ideas for the reason for setting the “#navbar li” to position “relative”.
I tried to play around with it but it does not seem to make a difference if “#navbar li” has a position set or not. Is there something i am missing?
Thanks
Hi there,
If you want to position something relative to another object, then the easiest way is to structure your HTML in a way that makes it possible to do that. In this situation, position: relative and position: absolute go together.
Here’s a simple example that shows how the both are used.
Do you see how in this example with a position: absolute; on the children they will then move according to where they are relative to the parent?
Typically, the element you want positioned should have a position: absolute along with the top/bottom/left/right you desire. Once you declare this, it will position itself according to the nearest ancestor that is positioned , which is where position: relative; comes in handy, to be that anchor. If there is no positioned parent, it will position itself according to the body and will move along with the page scrolling.
If you can share your code that might be easier as well, to explain how it will work in your specific case. 
Hi,
Thanks for replying!
I actually thought i understood the concept until i saw “position : relative” being used in a strange way so i thought i would ask out of curiosity
The code i am referring to is actually FCCs solution to the "technical documentation page " project here (line 45)
Thanks
Hm, that line doesn’t seem to be doing much. Commenting it out makes no difference even for mobile screen.
I’m with you on this one! 