Day 6 of the 120-days fullstack software development bootcamp. I will like to remind us that "you are more likely to get what you worked for than what you wished for", lets work on this coding.
Worked on Position in CSS, this is a very delicate part in CSS, even some senior Software Engineer don't fully understand everything about Position in CSS. Position helps us to place items at our desired position and it also helps us to determine the parts that should be fixed and the parts that shouldn't be fixed. We have majorly 5 types of Position in CSS: Static, Fixed, Relative, Absolute and Sticky.
Position: Static -: This keeps the item at it default/natural postion of document flow and it remains that way, it can't be moved around, but magin and padding can be applied to it.
Position: Fixed-: This also takes the document flow relative to the viewport, once it is place on a specific place it doesn't not move, it remains fixed even if you are scrolling down on the page. It is mostly used in places liked the header/nav-bar where we don't want the part to move.
Position: Relative -: This also takes the normal document flow but just that it can be moved around and be placed anywhere we want using it's properties like: top, left, right, bottom.
Position: Absolute-: This one is positioned RELATIVE to the nearest PARENT, normally it nearest parent is alwasy having a Position: Relative in which the Position: Absolute is inside as the child element but in the case it doesn't have a Positioned Parent, it takes the Relative Position of the HTML itself or any nearest PARENT ELEMENT.
Position: Sticky-: This one acts like Relative, it allows you to scroll until you reach the end of the scroll then at that point it acts like Fixed, there's need for its parent to have enough height that can enable scrolling.
Properties Used for moving or placing our items where we want:
Top
Bottom
Left
Right
z-index: This helps us to determine which is the outermost, like which one should be on top like in the case where we have two or more items overlaying on each other, normally at default all items when placed have a z-indez of 0(zero) so 1(one) takes it one place above it current position two takes it two places up above, although it all depends on how many items we have overlaying on each other and how many places we want to move above.
Thanks for taking your time to read through, if there's any question on you have on Position or anything on CSS, HTML, JavaScript, React, Next js, Express, Node, don't hesitate to contact me through any medium ranging from WhatsApp, Facebook, twitter, LinkedIn, etc.