What is the difference between static, relative, absolute and fixed positions?

Static Position

Static position indicates that the element is displayed normally as it should appear in the HTML flow. The default setting of elements is static. This position is not usually explicitly set unless we want to override settings that had been previously applied.

In the image below the three divs are static and appear normal in the HTML flow.

<style type="text/css">
#div1 {
	background-color: red;
	border: 2px solid black;
	width: 300px;
	height: 200px;
	position: static;
}

#div2 {
	background-color: yellow;
	border: 2px dashed blue;
	width: 200px;
	height: 100px;
	position: static;
}

#div3 {
	background-color: green;
	width: 150px;
	height: 50px;
	position: static;
}
</style>

<body>
  <div id="div1">
    div1
	<div id="div3">
	  div3
	</div>
  </div>
  
  <div id="div2">
    div2
  </div>
</body>
Relative Position

When an element's position is set to relative, the position of the element is offset from where it normally appears in the HTML flow.

In the image below div2 is relative position and offset from the top by 50px and from the left by 100px.

<style type="text/css">
#div1 {
	background-color: red;
	border: 2px solid black;
	width: 300px;
	height: 200px;
	position: static;
}

#div2 {
	background-color: yellow;
	border: 2px dashed blue;
	width: 200px;
	height: 100px;
	position: relative;
	top: 50px;
	left: 100px;
}

#div3 {
	background-color: green;
	width: 150px;
	height: 50px;
	position: static;
}
</style>

<body>
  <div id="div1">
    div1
	<div id="div3">
	  div3
	</div>
  </div>
  
  <div id="div2">
    div2
  </div>
</body>
Absolute Position

When an element's position is set to absolute, the element is removed from the normal HTML flow and placed within the first non-static parent element.

By default all parent elements are static. That is why the absolute positioned element is placed usually within the top-left corner of the browser window (top: 0, left: 0).

In the image below div3 is absolute positioned, and since the parent image is static, div3 is positioned within the browser window with top 0px and left 0px.

<style type="text/css">
#div1 {
	background-color: red;
	border: 2px solid black;
	width: 300px;
	height: 200px;
	position: static;
}

#div2 {
	background-color: yellow;
	border: 2px dashed blue;
	width: 200px;
	height: 100px;
}

#div3 {
	background-color: green;
	width: 150px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

<body>
  <div id="div1">
    div1
	<div id="div3">
	  div3
	</div>
  </div>
  
  <div id="div2">
    div2
  </div>
</body>

However, if a parent element is non-static, the absolute element is positioned within that non-static element and not the browser window.

As you can see in the image below div3 is absolute positioned. However, its parent, div1 is non-static this time, thus div3 is positioned within the parent element and not browser window. You can see the border of div3 not crossing that of div1.

<style type="text/css">
#div1 {
	background-color: red;
	border: 2px solid black;
	width: 300px;
	height: 200px;
	position: relative;
}

#div2 {
	background-color: yellow;
	border: 2px dashed blue;
	width: 200px;
	height: 100px;
}

#div3 {
	background-color: green;
	width: 150px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

<body>
  <div id="div1">
    div1
	<div id="div3">
	  div3
	</div>
  </div>
  
  <div id="div2">
    div2
  </div>
</body>
Fixed Position

By using this position, the element is very much similar to an absolute position. However, the position is always relative to the browser window. In other words, this position disregards any parent non-static elements, and positions the fixed element always within the top-left of the browser window.

In the image below, even though div1 is non-static and parent element of div3, since the latter has a fixed position, then it is positioned within the browser window and disregards its parent.

<style type="text/css">
#div1 {
	background-color: red;
	border: 2px solid black;
	width: 300px;
	height: 200px;
	position: relative;
}

#div2 {
	background-color: yellow;
	border: 2px dashed blue;
	width: 200px;
	height: 100px;
}

#div3 {
	background-color: green;
	width: 150px;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
}
</style>

<body>
  <div id="div1">
    div1
	<div id="div3">
	  div3
	</div>
  </div>
  
  <div id="div2">
    div2
  </div>
</body>
Show Comments