CSS Position

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>
See Output →

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: 407px; 
      height: 207px; 
      left: 107px; 
    }
  
    .div2 {
      background-color: gray;  
      height: 1502px; 
    }
  </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 1500px</div>
</body>
</html>
See Output →

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: 300px; 
      height: 200px; 
      right: 21px; 
      bottom: 0; 
    }
  
    .div2 {
      background-color: #224512;  
      height: 1503px; 
      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 1500px</div>
</body>
</html>
See Output →

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>
See Output →

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>
See Output →

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved