What is the Default Value of the Position Property

In this article, we will see What is the Default Value of the Position Property. We know that the CSS position property has five values, there are:

Static
Relative
Absolute
Fixed
Sticky

Position: static;

The default value of the position property is static for any HTML element if not specified explicitly. HTML elements are displayed as they appear in the normal document flow. By default, all HTML elements’ position property is set to static. As the name itself indicates, static elements cannot be moved i.e static elements are not affected by left, right, bottom, top, and z-index properties.

Note: while using the position property: we take the help of left, right, bottom, top and z-index properties to position an HTML element.

Example :

<html>
<head>
  <title>HTML DEMO</title>
</head>
<style type="text/css">
   span{
      position: static;
      left: 50px;
   }
</style>
<body>
<span>Span 1</span>
<span>Span 2</span>

<div>Div 1</div>
<div>Div 2</div>

</body>
</html>

Output:

Here, I have created two span tags with some text inside.
The span tag is inline-level elements, so it always displayed one beside another.
Then we created two div tags with some text inside.
The div tag is displayed one below another because the div tag is block level element.
If we set the position to static for any elements, it cannot be moved. So, here we have set the position to static for the span tag. And we also try to move the element using the left property to 50px.
See the above output, the span tags are not moved.