Absolute Position Property

Absolute Position Property in Cascading Style Sheet

The absolute value of the position property means that the element will be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties.

The element will move with the rest of the content when scrolling. As an example, you will see a red ball 550 pixels from the top of the browser and 400 pixels from the left of the browser.

The code for this is:

p {

  position:absolute;

  top:50px;

  left:600px;

}

The HTML code,

<div>

  <p><img src="red-ball.jpg">

</div>

depicts that the image you see that is 50px from the top of the browser and 600px from the left of the browser. Please notice that as you scroll up and down and page, the red ball moves along with the rest of the page.

This is different from when we specify {position:fixed;}, when the red ball stays in the same place as the rest of the page moves.