CSS : Position property

The position property is used to set the position of an element in html document. By with position property we can specifies what kind of positioning method used for an element. There are five possible position values for elements :
  • static
  • relative
  • fixed
  • absolute
  • sticky
The position property is used within the conjunction with the top, bottom, left and right properties, and also note that these properties can be used only after the position property is set first.

1. Static Positioning :

An element with static positioning is not positioned in any special way, it is always positioned according to the normal flow of the page. The HTML elements are positioned static by default. Syntax :
 position: static;
Example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div {
      position: static;
      border: 2px solid #4f4f4f;
      width: 300px;
    }
  </style>
</head>
<body>
  <p>Text with Static Position:</p>
  <div>Hello world. This is the test paragraph.</div>
</body>
</html>
Output :
Text with Static Position:
Hello world. This is the test paragraph.

2. Relative Position :

In relative positioning, the element is positioned relative to its normal position. By setting up the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

Example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div {
      position: relative;
      left: 20px;
      border: 2px solid #4f4f4f;
      width: 300px;
    }
  </style>
</head>
<body>
  <p>Text with Static Position:</p>
  <div>Hello world. This is the test paragraph.</div>
</body>
</html>
Output :

Text with Static Position:
Hello world. This is the test paragraph.

3. fixed Position :

In fixed positioning, the element will always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. For example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div#testblk {
      position: fixed;
      top: 50px;
      left: 80px;
      background-color: yellow;
      border: 2px solid #4f4f4f;
      width: 165px;
    }
    div#main {
      width: 400px;
      height: 135px;
      border: 2px solid red;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="main">
  <div id="testblk">Text with Fixed Position.</div>
    This is a simple paragraph that is meant to be nice and easy to type which is why there will 
    be mommas no periods or any capital letters so i guess this means that it cannot really be 
    considered a paragraph but just a series of run on sentences this should help you get faster 
    at typing as im trying not to use too many difficult words in it although i think that i might 
    start making it hard by including some more difficult letters I'm typing pretty quickly so 
    forgive me for any mistakes i think that i will not just tell you a story about the time i went 
    to the zoo and found a monkey and a fox playing together they
  </div>
</body>
</html>
Output :


4. absolute position :

An element with absolute positioning is positioned to the nearest positioned ancestor. If no such element is found, then it uses the document body, and moves along with page scrolling. With the absolute positioning, we can place an element anywhere on a page.

Example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div {
      position: absolute;
      border: 2px solid #4f4f4f;
      width: 300px;
      left: 150px;
      top: 80px;
    }
  </style>
</head>
<body>
  <p>Text with Absolute Position:</p>
  <div>Hello world. This is the test paragraph.</div>
</body>
</html>
Output :

Text with Absolute Position:
Hello world. This is the test paragraph.

5. sticky :

An element with sticky positioning is based on the user's scroll position. Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div#testblk {
      position: -webkit-sticky; /* for safari */
      position: sticky;
      top: 0px;
      background-color: yellow;
      border: 2px solid #4f4f4f;
      padding: 3px;
    }
    div#main {
      width: 500px;
      height: 135px;
      border: 2px solid red;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="main">
    This is a simple paragraph that is meant to be nice and easy to type which is why there will 
    be mommas no periods or any capital letters.
  <div id="testblk">Text with Sticky Position.</div>
    This is a simple paragraph that is meant to be nice and easy to type which is why there will 
    be mommas no periods or any capital letters so i guess this means that it cannot really be 
    considered a paragraph but just a series of run on sentences this should help you get faster 
    at typing as im trying not to use too many difficult words in it although i think that i might 
    start making it hard by including some more difficult letters I'm typing pretty quickly so 
    forgive me for any mistakes i think that i will not just tell you a story about the time i went 
    to the zoo and found a monkey and a fox playing together they
  </div>
</body>
</html>
Output :

This is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters.
Text with Sticky Position.
This is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters so i guess this means that it cannot really be considered a paragraph but just a series of run on sentences this should help you get faster at typing as im trying not to use too many difficult words in it although i think that i might start making it hard by including some more difficult letters I'm typing pretty quickly so forgive me for any mistakes i think that i will not just tell you a story about the time i went to the zoo and found a monkey and a fox playing together they

Remember when you are set the position to sticky then you need to also set the top, right, bottom or left property which specifies where the element will be sticked. Also note that the Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.

There are some other properties used in positioning of elements, which are :
  • top : It is used to set a top margin edge for a positioned box.
  • bottom : It is used to set the bottom margin edge for a positioned box.
  • left : It sets a left margin edge for a positioned box.
  • right : It is used to set a right margin edge for a positioned box.
  • z-index : It is used to set the stack order of an element. When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element, means which element should be placed in front of, or behind, the others.

Next Topic :