Once I first began studying CSS, I used to be actually confused about what every worth of the
place property did and when to make use of
sticky. It is a abstract of what I've discovered in regards to the values.
The default worth of the
place property is
static. The weather are displayed within the order (doc stream) of what's written within the HTML.
relative worth is de facto just like the
static worth besides you may change the component's place relative to its regular place. So what does that imply? It signifies that you should utilize the properties
Discover within the picture above, regardless that
child-one has the property
left: 20px the component didn't shift 20px to the left. That's as a result of it has
place: relative shifted each to the left and from the highest relative of its 'static' place. However now
child-two is masking
child-three. Why? Whenever you use the properties
backside, they take the component out of the doc stream whereas the opposite components stay within the doc stream. In consequence, it's uncommon to make use of
place: relative components since they make it tough to type components across the
place: relative component.
absolute worth fully removes the component from the doc stream whereas the opposite components render just like the
absolute component didn't exist in any respect. Discover within the picture beneath how
child-one simply 'floats' above the opposite component.
That is actually helpful for occasions whenever you need to place a component at a particular location with out transferring the weather round it.
place: absolute. The
absolute worth positions a component inside some mum or dad component it will probably reference. A component can not reference a mum or dad component that has
place: static. Parts can solely be positioned completely to components which have
place worth of
sticky. If there isn't any mum or dad component that the component might be positioned completely to, it is going to be positioned relative to the browser window (the HTML component).
Within the picture above,
child-one is above the
mum or dad component and positioned 0px from the highest of the browser window. It is because it is referencing the browser window because the mum or dad container, not the
mum or dad component as a result of
mum or dad has
grandchild-one is referencing
child-three as its reference as a result of it has
place: relative, not
grandchild-one is 10px from the highest of the
child-three component. Utilizing
relative to place an
absolute component is without doubt one of the commonest makes use of of
place: relative. Having an
absolute component relative to a
relative component prevents the
absolute component from falling again to referencing a earlier
relative component (or any component that has any worth aside from
static) or all the way in which again to the browser window.
fastened component is positioned relative to the browser window. Dad or mum components don't matter. For instance, in case you have:
child-one component would keep on the high of the web page even if you happen to scroll down. Mounted components transfer with the scroll to remain in the very same place on the web page.
place: fastened can be utilized to create a navbar that sticks to the highest of the web page.
sticky worth is sort of a mixture of the
fastened values. By default, the component is
relative and stays relative till you scroll previous the place the component is, then it turns into
high property to 'stick' the component to the highest of the web page.
Earlier than scrolling:
After scrolling previous the component:
child-two component is now
fastened 0px from the highest of the browser window.
Assets I referenced:
CSS place Property
Be taught CSS Place in 9 Minutes
The Forgotten CSS Place
Thanks for studying! :)