CSS Tutorial

CSS position plays an important role to define the structure of the HTML element on a web page. By using CSS position property, you can define an HTML element’s position at a particular location on that the web page where it wants to display.

Now, we will discuss how you can use all different values of CSS position in different conditions. Basically, The CSS position can have five values which are listed below:

Values Of CSS Positioning

position: static
position: relative
position: fixed
position: absolute
position: sticky

The CSS positioning has four different values like the Top, Bottom, Left, and Right. Let's discuss all CSS position property one by one:

CSS Static Position

By default, all HTML elements are in a static position and the static position can not be affected by the value top, bottom, left, and right. CSS static position work with the normal flow of web page.

Example: Static Position

<html>
<head>
   <style type="text/css">
    .mydiv_st {
      position: static; 
      background-color: orange; 
      color: white; 
      height: 200px; 
    }
  </style>
</head>
<body>
  <div class="mydiv_st">Hello! This is a div element with position as static.</div>
</body>
</html>

Output

Hello! This is a div element. Now we are going to set position as static.

CSS Relative Position

The relative position is used to change the default position of an HTML element. After setting position as relative now you can set that element at a particular position. This HTML element will relative to its parent element.

Set any value for a position like left, right, top, and bottom.
The value of the top, bottom, left, and right can be either positive or negative, for example:
The position-left is (-22px) means towords the right to left side (22px).
- Move left using negative value of position left.
- Move right using positive value of position left.
The position-top is (-23px) means towords the left to right side (23px).
- Move up using negative value of position top.
- Move down using positive value of position top.

Example of Relative Position

<html>
<head>
   <style type="text/css">
    .mydiv {
      position: relative; 
      background-color: #422322; 
      color: white; 
      width: 300px; 
      height: 100px; 
      left: 50px; 
    }
  
    .div2 {
      background-color: gray;  
      height: 100px; 
    }
  </style>
</head>
<body>
  <div class="mydiv">Hello! This is a div element with position as relative.</div>
  <div class="div2">This is another div with height 100px</div>
</body>
</html>

Output

Hello! This is a div element. Now, we are going to set the position as relative.

This is another div with height 100px

CSS Fixed Position

The CSS fixed position used to fixed any HTML element to the positioned relative of the viewport and it will be not scrolled during the page scroll, You can use Top, Bottom, Left, and right position properties to point the element at a particular place.

Example of Fixed Position

<html>
<head>
   <style type="text/css">
    .mydiv {
      position: fixed; 
      background-color: #234231; 
      color: white; 
      width: 200px; 
      height: 100px; 
      right: 20px; 
      bottom: 0; 
    }
  
    .div2 {
      background-color: #224512;  
      height: 200px; 
      color: white; 
    }
</style>
</head>
<body>
  <div class="mydiv">Hello! This is a 'div' element with fixed position.</div>
  <div class="div2">This is another div with height 200px</div>
</body>
</html>

CSS Absolute Position

The absolute position is just like a fixed position; the Only difference is positioned relative to the nearest positioned element. If there is no nearest positioned element then it positioned to viewport relative. While in case of a fixed position it is always positioned to viewport relative.

The viewport is the whole area of your computer device screen where you can see the web page to perform.

Example of Absolute Position

<html>
<head>
   <style type="text/css">
    .mydiv_4 {
      position: relative; 
      background-color: #342322; 
      color: white; 
      width: 601px; 
      height: 401px;
    }
  
    .div11 {
      position: absolute; 
      background-color: #acdaab;  
      height: 151px; 
      width: 301px; 
      color: white; 
      right: 0px; 
      bottom: 22px; 
    }
  
    .div21 {
      background-color:#1ac32b;  
      height:1504px; 
      color:white; 
    }
</style>
</head>
<body>
  <div class="mydiv_4">This is div with position relative;
    <div class="div11">This is another div with position absolute.</div>
  </div>
  <div class="div21">This is third div with height 1500px.</div>
</body>
</html>

CSS Sticky Position

The CSS sticky position used to set the position of an element with the user's scroll. The sticky position have to set the values like Top, Bottom, Left, and Right.

Nowadays, the position sticky used in the head section to stop the menu at the top while page scrolling.

Example of Sticky Position

<html>
<head>
   <style type="text/css">
    .mydiv_5 {
      position: sticky; 
      background-color: #8e8f05; 
      color: white; 
      border: 2px solid #4CAF50; 
      height: 57px;
      position: -webkit-sticky; /* Safari */
      top: 24px;
    }
  
    .div23 {
      background-color: brown;  
      height: 1507px; 
      color: white; 
    }
</style>
</head>
<body>
  <p>Hello! This is paragraph befor sticky div.</p>
  <p>Now, you can see that this paragraph is at the top of the sticky.</p>
  <div class="mydiv_5">This is div with sticky position.</div>
    <div class="div23">
      <p>Hey.... There; It is paragraph just after sticky.</p>
    </div>
</body>
</html>

← Previous Next →

CSS Tutorial

CSS Tutorials

CSS Position

Values Of CSS Positioning

CSS Static Position

Example: Static Position

Output

CSS Relative Position

Example of Relative Position

Output

CSS Fixed Position

Example of Fixed Position

CSS Absolute Position

Example of Absolute Position

CSS Sticky Position

Example of Sticky Position

Related Topics

Related Topics

Policy & Disclosure

Popular

LifeStyle & Fun