static: (default)
absolute:
relative:
fixed: The element is positioned relative to the browser window
Example 1: static
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>
<style>
.box-orange {
background: orange;
height: 100px;
width: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static;
}
</style>
Example 2: relative (compare to normal position)
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>
<style>
.box-orange {
position: relative;
background: orange;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static;
}
</style>
Example 3: absolute
1) the absolute element is removed from the document flow
2) other elements behave like this element is removed from document flow, namely doesn’t exist
3) the absolute element will be positioned in relation to the first parent element
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>
<style>
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static;
}
</style>