CSS position

The CSS position property is used to define the position of an element using top, right, bottom, and left properties, based on the value (static, relative, fixed, absolute, or sticky) defined to it. For example:

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: green;
         color: whitesmoke; padding: 12px;}
      div.a{position: fixed; right: 0; top: 0;}
      div.b{position: fixed; left: 0; bottom: 0;}
   </style>
</head>
<body>

   <div class="a">position: fixed; right: 0; top: 0</div>
   <div class="b">position: fixed; left: 0; bottom: 0</div>

</body>
</html>

The output produced by this example is shown in the snapshot given below:

CSS position Syntax

The syntax of position property in CSS, is:

position: x;

The value of x should be any of the following:

static - Used to let the element flow normally. This is the default value. The top, right, bottom, and left properties have no effect on the element with position: static
fixed - Used to fix the position of an element on the web. The position of an element will takes place, relative to the window of current browser
relative - Used to move (position) an element from its normal position, without interrupting other content on the web
absolute - Similar to fixed, except that, it fix the position of an element based on its parent position. If no positioned element(s) is/are available as its parent, then it acts as fixed
sticky - Used to stick an element to its defined position when the element achieves its defined position, using the scroll, of course. Therefore we can say that, the sticky positioned element toggles between relative and fixed position. That is, originally the element acts as relative positioned element, but will stick to the position when the element gets its defined position
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS position: static Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      span{position: static; color: red; font-weight: bold;}
   </style>
</head>
<body>

   <p>Lorem ipsum, dolor sit amet <span>fresherearth</span> adipisicing elit.</p>

</body>
</html>

Output

Lorem ipsum, dolor sit amet fresherearth adipisicing elit.

CSS position: fixed Example

<!DOCTYPE html>
<html>
<head>
   <style>
      span{position: fixed; color: red; font-weight: bold;
         left: 20px; top: 200px;}
   </style>
</head>
<body>

   <p>Lorem ipsum, dolor sit amet <span>fresherearth</span> adipisicing elit.</p>

</body>
</html>

The output produced by above example is shown in the snapshot given below:

CSS position: relative Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; top: 10px;}
      .b{position: relative; left: 20px;}
   </style>
</head>
<body>

   <h2>Without position: relative</h2>
   <p>Lorem ipsum <span>fresherearth</span> dolor sit amet.</p>

   <h2>With position: relative; top: 10px</h2>
   <p>Lorem ipsum <span class="a">fresherearth</span> dolor sit amet.</p>

   <h2>With position: relative; left: 20px</h2>
   <p>Lorem ipsum <span class="b">fresherearth</span> dolor sit amet.</p>

</body>
</html>

Output

Without position: relative

Lorem ipsum fresherearth dolor sit amet.

With position: relative; top: 10px

Lorem ipsum fresherearth dolor sit amet.

With position: relative; left: 20px

Lorem ipsum fresherearth dolor sit amet.

As you can see from above example, a relatively positioned element get positioned relative to its normal position.

CSS position: absolute Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 320px; height: 280px;
         border: 2px solid red;}
      .b{position: absolute; top: 120px; right: 10px; padding: 12px;
         border: 2px solid blue;}
   </style>
</head>
<body>

   <div class="a">
      <div class="b">fresherearth</div>
   </div>

</body>
</html>

Output

fresherearth

However, if none of the parent element(s) of absolutely positioned element, is/are not a positioned element, then the position: absolute behaves like position: fixed. For example:

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{width: 320px; height: 280px; border: 2px solid red;}
      .b{position: absolute; top: 120px; right: 10px; padding: 12px;
         border: 2px solid blue;}
   </style>
</head>
<body>

   <div class="a">
      <div class="b">fresherearth</div>
   </div>

</body>
</html>

Now the output will be:

CSS position: sticky Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.a{position: relative; height: 120px; overflow: auto;}
      .s{position: sticky; top: 0; background-color: green;
         color: whitesmoke; text-align: center; padding: 7px;}
   </style>
</head>
<body>

   <div class="a">
      <h4>Scroll to see the sticky positioned element, that will stick to the top</h4>
      <div class="s">fresherearth</div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, consectetur
         est. Esse.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas qui eveniet
         incidunt amet, non excepturi impedit exercitationem soluta maxime doloremque.</p>
      <p>Lorem ipsum dolor sit amet consectetur.</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, accusamus.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium.</p>
   </div>

</body>
</html>

Output

Scroll to see the sticky positioned element, that will stick to the top

fresherearth

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, consectetur est. Esse.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas qui eveniet incidunt amet, non excepturi impedit exercitationem soluta maxime doloremque.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, accusamus.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium.

In above example, the following code:

height: 120px; overflow: auto;

is used to define the height of the DIV with overflow of content using the scroll bar, only to avoid writting more content for the whole height of the current screen. My only aim is, to show you the example of sticky positioned element.

CSS Online Test

« Previous Tutorial Next Tutorial »