Positions in CSS

Position and Type of Position

Position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

Types of positions in CSS

There are five types of position in CSS which are

postion: Static;
 postion: fixed;
postion: Sticky;
postion: Relative;
postion: Absolute;

it also work depending upon the position value. let us understand the different types and its use.

1.Static
Element positioned static by default. it is not affected by top, botton, left, right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

#box3{
    position: static;
    top: 20px;
    left: 10px;
 }

image.png

2. Fixed
The fixed value is unaffected by scrolling. The element is removed from the normal document flow, and no space is created for the element in the page layout. .

#box3{
    position: relative;
    top: 50px;
    left: 50px;
 }

image.png

image.png

3. Sticky
The position of an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed value.

CSS .nav{ 
position: sticky; top: 0px;
}

image.png

4.Relative
an element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. T the space given for the element in the page layout is the same as if position were static.

#box3{
    position: relative;
    top: 50px;
    left: 50px;
 }

image.png

5. Absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout.it behave based on parent other elements absorb the empty position.

header{
   position: relative;
}
#box3{
    position: absolute;
    top: 50px;
    left: 50px;
 }

image.png

This is all about position in flex, hope you like it my blog !