Css position property – static, relative, absolute and fixed positioning

CSS position property decides how an element will be places in document. It can have 4 values static (default), relative, absolute and fixed.

css-position-static-relative-absolute-fixed

CSS property position

CSS version: CSS 2.1
Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: all elements
Inherited: no

Understanding position values

position valuetop,leftdocument placement and impact on other items
staticNA (not used)Part of document normal flow
relativeRelative to its normal positionPart of document flow but shifted. May leave some space empty and overlap with other elements if shifting is non-zero. Due to its shifting, other elements are not shifted. They pretend as if this element is not shifted.
absoluteRelative to first relative/absolute positioned ancestorRemoved from document normal flow and placed at its position. Will overlap with some elements
fixedRelative to viewportRemoved from document normal flow and placed fixed in viewport. Will overap with some elements

Default top,left values

If top and/or left values are not specified then the default values are taken as if the element is static.

Comments on bottom,right properties

We can also use bottom and/or right properties. That that case offset applies from bottom or right. Also note that bottom:10px will mean that elements bottom will be 10 less that reference bottom and similarly for property right.

Example – position static

<style type="text/css" media="screen">
.outer {
  background:lightgreen; width:100px;
}
.inner1 {
  background:lightgray; width:100px;
}
</style>
<div class="outer">
outer1
<div class="inner1">
inner1 inner1 inner1 inner1 inner1 inner1
</div>
<div class="inner2">
inner2 inner2 inner2 inner2 inner2 inner2
</div>
</div>
refresh

Note that top, left etc are not applicable here. Try setting top and left for inner1 and you will see no difference.

Example – position relative

<style type="text/css" media="screen">
.outer {
  background:lightgreen; width:100px;
}
.inner1 {
  background:lightgray; width:100px;
  position: relative;
  top: 10px;
  left: 10px;
}
</style>
<div class="outer">
outer1
<div class="inner1">
inner1 inner1 inner1 inner1 inner1 inner1
</div>
<div class="inner2">
inner2 inner2 inner2 inner2 inner2 inner2
</div>
</div>
refresh

Few points to note:

  1. inner1 div is shifted. But no impact on inner2 position in document normal flow.
  2. inner1 shifting cause some vacant space and some overlapping.
  3. If set specify top,left 0 for innner1 div, it would just act like static.

Example – position absolute

<style type="text/css" media="screen">
.outer {
  background:lightgreen; width:100px;
  position: relative;
}
.inner1 {
  background:lightgray; width:100px;
  position: absolute;
  top: 30px;
  left: 30px;
}
</style>
<div class="outer">
outer1
<div class="inner1">
inner1 inner1 inner1 inner1 inner1 inner1
</div>
<div class="inner2">
inner2 inner2 inner2 inner2 inner2 inner2
</div>
</div>
refresh

Few points to note:

  1. inner1 being position:absolute, will be positioned relative to first ancestor with position relative or absolute. That ancestor is outer div here.
  2. In there is no ancestor with position relative or absolute, absolute elements are placed relative to body.
  3. The inner1 div is not part of document normal flow and hence it is removed from normal flow. you can see next element (inner2) has been placed as if inner1 does not exists.

Example – position fixed

<style type="text/css" media="screen">
.outer {
 height:1000px;
  background:lightgreen; width:100px;
  position: relative;
}
.inner1 {
  background:lightgray; width:100px;
  position: fixed;
  top: 50px;
  left: 100px;
}
</style>
<div class="outer">
outer1
<div class="inner1">
inner1 inner1 inner1 inner1 inner1 inner1
</div>
<div class="inner2">
inner2 inner2 inner2 inner2 inner2 inner2
</div>
</div>
refresh

Few points to note:

  1. Even when we scroll, fixed element remains stationary. It position is relative to viewport.
  2. We can also use bottom,right values to place it.
  3. The fixed element is not part of document normal flow and hence it is removed from normal flow. you can see next element (inner2) has been placed as if inner1 does not exists.

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments