CSS Position

The CSS position property is provided to set the position for an element. it is also used to place an element behind another and also useful for the scripted animation effect property.

CSS positioning:

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

CSS Static Positioning:

This is a by default position. It always positions an element according to the normal flow of the web page.

CSS Fixed Positioning:

This property used to put the text fixed on the browser. This fixed test is positioned relative to the browser window and does not move even you scroll the window.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
  position: fixed;
  top: 50px;
  right: 5px;
  color: red;
}
</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:

CSS Position

CSS Relative Positioning:

It is used to set the element relative to its normal position.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
  position: relative;
  left: -10px;
}
h2.pos_right {
  position: relative;
  left: 30px;
}
</style>
</head>
<body>
<h2>heading with no position</h2>
<h2 class="pos_left">positioned left according to its normal position</h2>
<h2 class="pos_right">positioned right according to its normal position</h2>

</body>
</html>

OUTPUT:

CSS Position

CSS Absolute Positioning:

It is used to position an element relative to the first parent element that has a position other than static.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  position: absolute;
  left: 150px;
  top: 250px;
}
</style>
</head>
<body>
<h2>heading has an absolute position</h2>
<p> Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.</p>
</body>
</html>

OUTPUT:

CSS Position