info@tutsfinder.in



CSS Position



This property is used to set position of an element (static, relative, absolute, fixed, or sticky).


Static

Every element has static property by default, It is not positioned in any special way.

Position{
	Position:static;
}

Relative

It is same as static unless you add some extra properties to it.



Example
<!DOCTYPE html>
<html>
<head>
   </head>

   <body>
      <div style = "position:relative; left:100px; top:10px">
         Relative Position
      </div>
   </body>
</html>


Output:



Fixed

It always stay at same place even you scroll your browser window.



Example
<!DOCTYPE html>
<html>
<head> 
<body>
      <div id="demo" style = "position:fixed; bottom:0; right:0;background-color:#17a2b8;color:white">
         Fixed Position.
      </div>
<script>
var x = new Date();
document.getElementById("demo").innerHTML = x;
</script>

See in bottom right corner.

</body>
</html>


Fixed Position.
Absolute

It positioned the element at the specefied location relative to top left corner of the screen.

Example
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 500px;
  height: 300px;
  border: 2px solid black;
} 

div.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 100px;
  border: 2px solid black;
}
</style>
</head>
<body>

<div class="relative">Div with relative position
  <div class="absolute">Div with absolute position</div>
</div>
</body>
</html>


Output:

Absolute