Hello Everyone, Today we're going to explain that how we can use position property in CSS to create the layout of our webpage

CSS Position Property

CSS Position Property define that how the position of a specific element will display in a web-page. Elements are positioned using top,right,bottomand left property but these properties will no use except Positioning property set first for it. So, both CSS properties works together like

 .position{
                 position: relative / absolute / fixed;
                 left / right / top / bottom: 10px;
}

CSS Position Types

Here's the types of CSS Positioning which we used as a value of position property in CSS

• Static Position

• Relative Position

• Absolute Position

• Fixed Position

  .child{
  position: static /relative /absolute /fixed;
  }
  

  To explain them thoroughly we'll create two divs in html file one div for parent container and other one for child container within it's parent.

let's breakdown each type in detail with example to see how every value individually works in CSS.

position: static;

According to CSS rule, Elements always in static position by default. So, if we assign static position to any element in CSS, it'll not change anything. Also static positioned elements are not affected by the top, bottom, left, and right properties. As here in example, we assign static value to child element's position with 50px to its left but you can see nothing has change.

.child {
position: static;
left: 50px;
}

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. So, basically we don't use this positioning value in CSS, and we just use other three position properties while making the layout of webpage.

position: relative;

Relative position works same as static position ,means if we go to our example and change its child div position from static to relative, you'll notice that nothing has changed but one main thing which differentiate relative position from static is that in static we can't use left, right, top or bottom properties but in relative position you can surely apply all these four properties with it. As here in example, we assign relative value to child element's position with 50px to its left you'll see that child box will move 50px from left.

.child {
position: relative;
left: 50px;
}

An element with position: relative; is positioned relative to its normal position.

position: absolute;

Now we're going to discuss about third most important CSS positioning value which is called absolute. Absolute value is mostly use for child element of any parent cell. Means we usually assign absolute position to child element and relative position to it's parent element. So, to set absolute positioning to any child element first make sure to set its parent container with relative positioning, otherwise child element will consider whole page as its space and will moves along page scrolling. And with absolute value, you can surely apply four CSS properties left, right, top and bottom to make element's final position. As here in example, first we'll assign relative value to parent element and then absolute value to child element's position with 50px to its left you'll see that child box will consider parent container as its space and just within the limit of parent container space it'll adjust 50px from left of its parent element.

.parent{
position: relative;
}
.child{
position: absolute;
left: 50px;
}

An element with position: absolute; is positioned relative to its parent position.

position: fixed;

Fixed position is alternate to absolute position, the major difference between both that fixed value make fix its element's position based on entire html webpage but an absolute value make its position based on its parent element's position. Also when we'll assign position: fixed to child element, then it'll become stick like permanently on same place of whole page. So, when you'll scroll the page, this child element will stay fix on same place and will not move anywhere else during scroll. Fixed positioned element always follow the page as you scroll, but always stick on same place during scroll, page move its position but the element with fixed position never move ,it just follow the whole body scroll moving. As here in example, we assign fixed value to child element's position with 50px to its left, you'll see that child box will not consider parent container as its space but will consider whole body so, it'll adjust 50px from left of its body element.

.child{
position: fixed;
left: 50px;
}
.parent{
position: relative;
}

Even though we've positioned its parent element as a relative but child with fixed position will ignore it and will consider whole body as its parent space and will stick on one place.

So, you've reached it's end HOPE YOU GOT THE POINT!