Today i have studied about html position. is an important property to place the element where we want in our document. it is used to move the element from one position to another and place one element above the another element.

It works with the helper properties top, right, bottom, left, and z-index to determine final placement.

There are five main values for the position property

static

relative

absolute

fixed

sticky

static

static (Default): Elements follow the normal document flow. Setting top, right, bottom, or left has no effect.

<div class= "box" > Hello </div>

Enter fullscreen mode

Exit fullscreen mode

.box { position : static ; top : 50px ; /* Will NOT work */ left : 50px ; /* Will NOT work */ }

Enter fullscreen mode

Exit fullscreen mode

The box stays in its normal position.

the default position for each element in html is static, it is the normal flow of document.

relative

relative: The element is positioned relative to its normal position.…