Fixed Value Property in CSS

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

For example, consider u see a red ball 50 pixels from the top of the browser. As you scroll down the page, that red ball stays in the same place. The code for this is:

In CSS type:

p {

  position:fixed;

  top:50px;

  left:650px;

}

The HTML code,

<div>

  <p><img src="red-ball.jpg"> /* Create a ball image in Photoshop of 50 by 50 px*/

</div>

renders the image you see that is 50px from the top of the browser and 650px from the left of the browser. Please notice that as you scroll up and down and page, the red ball stays in the same place.

Relative Position Property

Relative Position Property

The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. 

It is used in combination with a direction (top, bottom, left, and right).

Let's view an example of relative position in action:

CSS Code

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

}

 

The HTML code,

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Default Position).

Example2

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

  position:relative;

  top:15px;

}

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Using Relative Position Property).