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 property

CSS position Syntax

The syntax of position property in CSS, is:

position: x;

The value of x should be any of the following:

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>CODESCRACKER</span> adipisicing elit.</p>

</body>
</html>
Output

Lorem ipsum, dolor sit amet CODESCRACKER 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>CODESCRACKER</span> adipisicing elit.</p>

</body>
</html>

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

css position fixed example

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>CODESCRACKER</span> dolor sit amet.</p>

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

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

</body>
</html>
Output

Without position: relative

Lorem ipsum CODESCRACKER dolor sit amet.

With position: relative; top: 10px

Lorem ipsum CODESCRACKER dolor sit amet.

With position: relative; left: 20px

Lorem ipsum CODESCRACKER 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">CODESCRACKER</div>
   </div>

</body>
</html>
Output
CODESCRACKER

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">CODESCRACKER</div>
   </div>

</body>
</html>

Now the output will be:

css position absolute example

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">CODESCRACKER</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

CODESCRACKER

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 »


Liked this post? Share it!