CSS POSITIONING (RELATIVE AND ABSOLUTE)

POSITIONING (RELATIVE AND ABSOLUTE)

 The relative and absolute positioning are one of the most common way we can position element and it is necessary for developers to know how to use them. Explaining this in it simplest form is what this post is all about. Let's dive into it.

POSITIONING

 Oops, sorry guys we have to know what positioning are before we dive into relative and absolute positioning. Positioning as the name implies is the act of putting element in various places on the web pages (depending on where you want it, you are the controller) and they are various type of positioning (fixed, sticky, absolute, relative and static), in which we will be focusing on only two which are relative and absolute positioning.

RELATIVE POSITIONING

 An element is relative to itself, Oh wait, but i said this will be explain in it's simplest form. Yes it will, Let's use a simple example: follow me in my imagination of a pregnant woman inside a house. Are you in that realm with me. Okay let's go

 I said a relative positioning is an element relative to itself from our imagination the pregnant woman is the relative element when the left, bottom, right or top property (these are property used to control where element will be positioned) are applied to it, the pregnant woman will move but the house will stay the same which means her movement does not affect the outside div(the house).

BEFORE THE LEFT, RIGHT, BOTTOM OR TOP PROPERTY ARE USED

AFTER THE LEFT AND TOP PROPERTY ARE APPLIED

Oops from the last image when the mother moves the child div moves with it, yes that is when absolute positioning comes in play.

ABSOLUTE POSITIONING:

 It is an element that moves relative to its parent element which means the child moves according to how it's mother moves. It can also make it's own movement when the property left, right, top or bottom are applied to it but with respect to it's parent div i.e it moves relative to it's mother not the house since the mother is the one having the position relative syntax.

Note: When position relative moves from its original position it still retain the position it moves away from unlike absolute which do not retain it's position when it moves

BEFORE MOVING WHEN USING RELATIVE