Five main values of CSS Positions:
position: static | relative | absolute | fixed | sticky
and helper properties for setting the coordinates of an element
top | right | bottom | left | z-index
These properties don't work without a declared position, or with static
z-index : As value increases, it moves in front of other elements,
doesn't work with position: static or w/o a declared position
position: static
Default value if no value for position is specified.
Example:
<body>
<div class="box-red"></div>
<div class="box-blue"></div>
</body>
.box-red {
background: red;
height: 100px;
width: 100px;
}
.box-blue {
background: blue;
height: 100px;
width: 100px;
}
Divs are block elements by default, red div will appear atop of blue div.
Code Pen: Static position demo
position: relative
Element's new position is relative to its normal position. However, we
need helper properties to set coordinates.
.box-red {
position: relative;
background: orange;
height: 100px;
width: 100px;
top: 100px; // 100px from top
left: 100px; // 109px from left relative to old position
}
Now the red box will be appearing side by side with the blue box.
Code Pen: Relative position demo
NOTE : Setting relative for an element, doesn't affect other element's positions
position: absolute
An absolute positioned element is relative to its parent.
Element with position:absolute is removed from normal document flow and positioned
automatically to the starting point (top left corner) of the parent element.
If no parent elements are present, initial document will be its parent.
The removal affects other elements, and these other elements behaves as though element is removed completely from the webpage.
<body>
<div class="container">
<div class="box-red"></div>
<div class="box-blue"></div>
</div>
</body>
.box-red {
position: absolute;
background: red;
width: 100px;
height: 100px;
}
.container {
position: relative;
background: lightgrey;
}
// container must have position: relative so the absolutely positioned child stay inside of the parent
This is because it behaves like the red box is removed and shifts up to the red box's place
.box-red {
position: absolute;
background: red;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}
Code Pen: Absolute position demo
position: fixed.
Fixed position elements are also removed from normal document flow.
However, they are only relative to html document, not any other parents.
Not affected by scrolling.
position: sticky
Mixture of position: relative and position: sticky
NOTE : NOT supported by Internet Explorer or early versions of edge.