CSS position property decides how an element will be places in document. It can have 4 values static (default), relative, absolute and 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 value | top,left | document placement and impact on other items |
|---|---|---|
| static | NA (not used) | Part of document normal flow |
| relative | Relative to its normal position | Part 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. |
| absolute | Relative to first relative/absolute positioned ancestor | Removed from document normal flow and placed at its position. Will overlap with some elements |
| fixed | Relative to viewport | Removed 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>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>Few points to note:
- inner1 div is shifted. But no impact on inner2 position in document normal flow.
- inner1 shifting cause some vacant space and some overlapping.
- 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>Few points to note:
- inner1 being position:absolute, will be positioned relative to first ancestor with position relative or absolute. That ancestor is outer div here.
- In there is no ancestor with position relative or absolute, absolute elements are placed relative to body.
- 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>Few points to note:
- Even when we scroll, fixed element remains stationary. It position is relative to viewport.
- We can also use bottom,right values to place it.
- 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.
