Position allows us to move elements around on the screen and bypass the browser’s flow.
If possible use the browser’s flow before trying to manipulate elements with position.
Position
The position
property has a few different values, each doing something slightly different to the element in relation to the flow of the browser:
static
— the default, what all elements are before changing the positionrelative
— slight adjustments within the flow & coordinate system resetabsolute
— complete removal from the flow, movement with the coordinate systemfixed
— complete removal from the flow, attached to the window, doesn’t move when the browser scrolls
<div class="blue">…</div>
<div class="purple">…</div>
<div class="green">…</div>
Absolute
Position absolute
completely removes the element from the flow, allowing all other boxes to fill in the space.
.purple {
position: absolute;
}
Notice how the .green
element jumps up behind the .purple
box.
Width collapsing
When an element is set to position: absolute
its width
will collapse to be as narrow as the content needs—just like float
.
So, often when using absolute
it’s necessary to add a width
to the element.
Coordinate system
When using position: absolute
, the primary reason is to be able to position something using the coordinate system. The coordinate system is based on the following properties:
top
— move the element down from the top, can use negative numbersbottom
— move the element up from the bottom, can use negative numbersleft
— move the element in from the left, can use negative numbersright
— move the element in from the right, can use negative numbers
The only time we want to specify opposing coordinates, like top
& bottom
, at the same time is if we want to stretch the element to fill some space.
Changing the coordinate system with relative
The default coordinate system is based on the body
—so any positioning we do will always be in relation to the edges of the body
element.
<div class="grey-border">
<div class="purple">…</div>
</div>
.purple {
position: absolute;
right: 0;
bottom: 0;
}
We can reset the coordinate system by adding position: relative
to a parent of the element. After setting relative
, a new positioning context is created, and the coordinates will automatically be positioned against the parent element instead.
.grey-border {
position: relative;
}
Centering absolutely positioned elements
If you have an element that is absolutely positioned and you want it centred, but you don’t necessarily know how wide it is, the transform
property can be very helpful.
<div class="banner">
<h1>Free Mars!</h1>
</div>
.banner {
position: relative;
}
h1 {
bottom: 1em;
left: 50%;
position: absolute;
transform: translateX(-50%);
}
There are two critical pieces to centring the element:
- Set its
left
coordinate to50%
, which will move its left edge to the centre. - Then, use
transform: translateX()
to adjust the element leftwards, by half its width.
If you want to do vertical centring use top
and transform: translateY()
.
The combination of both these properties will make the absolutely positioned element appear centred within its parent element.
Relative
Though relative
creates a new positioning context, reseting the coordinate system, it also allows the element to take up space in the flow while adjusting its position slightly with the coordinates.
<div class="blue">…</div>
<div class="purple">…</div>
<div class="green">…</div>
.purple {
position: relative;
top: 10px;
right: 10px;
}
Fixed
Completely removes the box from the flow allowing all other boxes fill the space.
But position: fixed
always positions against the window and does not move when the user scrolls.
nav {
position: fixed;
top: 0;
width: 100%;
}
Position fixed doesn’t work very well in many situations—espeically mobile devices—so be careful when using it.
Z-index
As soon as an element has a position
set on it we can control the layering using z-index
.
z-index
doesn’t work on elements that are position: static
, the default.
The default stacking order for position: absolute
elements is: the further down the page the HTML is, the higher up, or closer to the viewer, the element will appear.
<div class="blue">…</div>
<div class="purple">…</div>
.blue {
position: absolute;
top: 0;
left: 20%;
}
.purple {
position: absolute;
top: 0;
left: 30%;
}
By adding z-index
to the elements we can control their layering.
The z-index
is a number, with no unit, that controls the layer. The higher the number, the closer to the viewer. The number only needs to be as high as how many other elements there are in the context.
.purple {
z-index: 2;
}
Video list
- Position: Introduction
- Position: Polariod
- Posiiton: Planet list
- Position: Layering with z-index
- Position: Hero banner
- Position: Position and flexbox