CSS Position

In CSS, we can control the position of an element within a web page using the position property.
The position property can take one of several values, each of which determines how an element is positioned relative to its normal position in the document flow.

CSS positioning:

CSS Static Positioning
CSS Fixed Positioning
CSS Relative Positioning
CSS Absolute Positioning

CSS Static Positioning:

This is the default position value. Elements with position: static are placed in the normal document flow, and their positioning is not affected by the other positioning properties (top, right, bottom, left, and z-index). It's not necessary to explicitly set position: static, as it's the default behavior.

CSS Fixed Positioning:

Elements with position: fixed are positioned relative to the viewport (the browser window) and do not move as the user scrolls. Like absolute, you can use the top, right, bottom, and left properties to set the position of a fixed element.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.pos_fixed {  
    position: fixed;  
    top: 50px;  
    right: 5px;  
    color: blue;  
}  
</style>  
</head>  
<body>  
  
<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p  
><p>........</p><p>........</p><p>........</p><p>........</p>  
<p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>  
<p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text...</p>  
<p class="pos_fixed">This is the fix positioned text.</p>  
</body>  
</html>

Output:

Some text...

Some text... This is the fix positioned text.

........

.... ...

........

Some text...

CSS Relative Positioning:

Elements with position: relative are still in the normal document flow but can be shifted from their normal position using the top, right, bottom, and left properties.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2.pos_left {  
    position: relative;  
    left: -30px;  
}  
h2.pos_right {  
    position: relative;  
    left: 30px;  
}  
</style>  
</head>  
<body>  
<h2> heading with no position</h2>  
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>  
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>  
<p>The  "left:-30px" subtracts 30 pixels from the element's original left position.</p>  
<p>The "left:30px" adds 30 pixels to the element's original left position.</p>  
</body>  
</html>

Output:

heading with no position

This heading is positioned left according to normal position

This heading is positioned right according to its normal position

The "left:-30px" subtracts 30 pixels from the element's original left position.

The "left:30px" adds 30 pixels to the element's original left position.

CSS Absolute Positioning:

Elements with position: absolute are positioned relative to the nearest positioned ancestor (an ancestor with a position value other than static) or, if none exists, relative to the initial containing block (usually the viewport). The top, right, bottom, and left properties are used to specify the element's exact position.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2 {  
    position: absolute;  
    left: 150px;  
    top: 250px;  
}  
</style>  
</head>  
<body>  
<h2>This heading has an absolute position</h2>  
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>  
</body>  
</html>

Output:

The heading below is placed 150px from the left and 250px from the top of the page.

This heading has an absolute position

All CSS Position Properties: