html

CSS Position Property | Explained

Cascading Style Sheets (CSS) consists of a vast range of properties that are used to style HTML elements, for instance, the color property is used to give text appearing on web pages some color, display property defines the behaviour of HTML elements, border property defines the border specs of an element, and the list goes on. This write-up, however, is designed to throw light on the position property of CSS. This guide covers the following.

  1. Position Property
  2. How to assign relative positioning to an HTML Element
  3. How to assign absolute positioning to an HTML Element
  4. How to give fixed position to an HTML element

Position Property

The position property of CSS specifies the position of an HTML element on a web page. It has the below-mentioned syntax.

position: value;

Here is an example to further demonstrate the position property.

How to assign relative positioning to an HTML Element

This example demonstrates the relative value of the position property which places an element with respect to its original position.

In this example, we are placing an image at a certain position using the relative value of the position property.

HTML

<body>

<img class="image" src="nature.jpg"></img>

</body>

CSS

.image {

  position: relative;

  left: 80%;

  top: 0%;

  height: 100px;

  width: 200px;

}

Output

Here the image is being positioned 80% from the left of the page with respect to its original position.

The default position of the image is as follows.

There are some values that can be assigned to the position property of CSS, which are as follows.

Value Description
static This is the default value that places elements according to their position defined in the document.
relative It positions an element with respect to its original position.
absolute It positions an element with reference to the position of the element’s ancestor.
fixed It positions an element with respect to the browser window.
sticky It positions an element with reference to the scroll position of the user.
initial It positions an element to its default value.
inherit It positions an element with respect to the properties inherited from its parent element.

Some more examples

For your better understanding we have illustrated the position property with the help of some more examples.

How to assign absolute positioning to an HTML Element

This example demonstrates the absolute value of the position property.

HTML

<body>

<div class="parent">Parent Div

<div class="child">Child Div</div>

</div>

</body>

Here two examples are <div> elements are being created one is regarded as parent div and the other as child div.

CSS

<style>

.parent {

  position: relative;

  height: 100px;

  width: 200px;

  border: solid black;

  background-color: burlywood;

}

.child {

  position: absolute;

  left: 15px;

  top: 20px;

  height: 100px;

  width: 170px;

  border: solid black;

  background-color: cadetblue;

}

</style>

The parent div has been assigned the relative position and the child div has been assigned the absolute position. As we know that absolute value positions an element with respect to the position of the its parent therefore in order for the child div to have an absolute position with respect to the parent div we have assigned the parent div the relative position.

Output

The child div has been placed at an absolute position with respect to the parent div.

How to give fixed position to an HTML element

This example demonstrates the fixed value of the position property.

HTML

<body>

<div class="yellow">

<p>Yellow div</p></div>

<div class="red">

<p>Red div</p>

</div>

<div class="green">

<p>Green div</p>

</div>

</body>

We have created three <div> elements one by the name yellow div, second by the name red div and the third div by the name green div.

CSS

.yellow {

  background-color:#FFE162;

  width: 400px;

  height: 500px;

}

.red {

  background-color:#FF6464;

  width: 300px;

  height: 350px;

}

.green {

  background-color:#91C483;

  width: 200px;

  height: 100px;

  position: fixed;

  left: 70%;

  top: 50%;

}

p{

  padding: 20px 0;

  text-align: center;

  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

}

In the above example, only the green div is assigned the fixed position, therefore, when you scroll the web page the green div remains fixed at its position with respect to the browser window.

Output

The green div has been successfully assigned the fixed positioning.

Conclusion

The position property of CSS specifies the position of an HTML element on a web page, moreover, the values that this can exhibit are; static which is the default value, absolute value positions an element with respect to its parent element, fixed value positions an element with respect to the browser window, relative value positions an element with respect to its original position, and sticky value positions an element with respect to the scroll position of the user. The position property and its various values are illustrated in this write-up with the help of examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.