Content Guide
- Static Position
- Relative Position
- Absolute Position
- Fixed Position
HTML and CSS example reference for this guide
HTML
<body>
<div class="Parent-Box">
<div class="box one">one</div>
<div class="box two">two</div>
<div class="box three">three</div>
</div>
</body>
CSS
.Parent-Box {
border: 5px solid red;
display: inline-block;
}
.box {
font-size: 50px;
color: white;
border: dotted 1px black;
height: 150px;
width: 150px;
background-color: #483434;
display: inline-block;
}
.one {
background-color: #eed6c4;
}
Result
Static Position
Static is the default position of every element, and properties top, right, bottom, and left do not affect the position of the element
Example
CSS
.one {
background-color: #eed6c4;
position: static;
}
Result
Relative Position
A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it
Example
CSS
.one {
background-color: #eed6c4;
position: relative;
top: 40px;
left: 40px;
}
Result
Absolute Position
The absolute position is the first position that completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.
Example
CSS
.one {
background-color: #eed6c4;
position: absolute;
top: 80px;
left: 50px;
}
Result
Fixed Position
Fixed position is a bit like an absolute position in that it removes the element from the document flow, but fixed position elements are always positioned relative to the screen no matter what position its parent elements are.
Example
CSS
.Parent-Box {
border: 5px solid red;
display: inline-block;
height: 300vh;
}
.one {
background-color: #eed6c4;
position: fixed;
top: 80px;
left: 50px;
}
Result
