The core idea of positioning is fairly simple. It enables to take elements out of their normal flow and place them in relation to a parent element, another element or the viewport (browser window). In order to control element position, there are offset properties like top, left, bottom, right.
CSS position property
One can enable position mode by setting corresponding value to the position css property. Here are the 5 position property values you can use:
position: static
This value is a default. It just places an element in its normal position in the document flow. Using offset properties with the default position mode has no effect on the element.
position: relative
This one shifts a positioned element by using offset properties. The offset is computed from the normal element’s position. Despite the element changes its position, the space that the element would have occupied is preserved.
position: absolute
An absolute positioned element is completely removed from the normal document flow. The space it took before is collapsed. And an offset is calculated from its containing block. Containing block is the nearest ancestor element that has a position value other than static. If there is no such element, the initial containing block is used. In other words, it would be positioned relative to the viewport.
Notice!
Margin collapsing doesn’t work with absolute positioned elements.
position: fixed
It’s almost like absolute positioning unlike containing block is always the browser viewport. There are lots of marvelous ways how to use it. A common one is to fix header and sidebar to the top of the screen so while you scrolling a page it’s fastened.
position: sticky
Caution!
Sticky value is experimental and doesn’t have such broad browser support as others!
The relatively new value is a kind of mix of relative and fixed position. A positioned element act like it’s relative until it reaches a point of going outside browser viewport, after which it becomes fixed.
CSS offset properties
top, right, bottom, left are used with the position property to define exactly where a positioned element will be placed. They take a value of any unit (%, rem, em, px, etc). It pushes the element from a specified side for a defined amount of distance.
CSS offset properties example:
.fixed {
posotion: fixed;
top: 50px;
right: 100px;
}CSS z-index property
Positioning causes elements to overlap with each other. z-index property determines which one should come out on top. The property takes any integer of any size. An element with the highest integer is displayed on the top of the so-called stack and overlaps other elements. By default, the last added element is placed in front of all others. But as soon as you assign a value for z-index for one element, the rest are set to 0 automatically, until you set custom value for z-index property for them as well.
