Shift things and lay them over each other

01 / 06

By default they line up in the order you wrote them

Every box you have built so far lined up from top to bottom in the order it was written. That arrangement is called the flow.

When you want to shift just one thing, or lay it over a picture, you use position.

02 / 06

relative shifts from where it was

Write position: relative; and add top or left, and it shifts from where it already was.

What is interesting is that the original place is left empty. The boxes around it do not move.

.mark {  position: relative;  top: 8px;  left: 12px;}

03 / 06

absolute leaves the flow

With position: absolute;, the element lifts out of the flow and floats. The place it was holding disappears too, so the boxes around it close up.

A floating element can be put anywhere with top, left, right and bottom.

.badge {  position: absolute;  top: 12px;  right: 16px;}

04 / 06

Decide which parent it measures from

absolute needs something to measure from — 12px from where? What it measures from is the nearest parent that has a position.

So the two get written together. relative on the parent, absolute on the child. That is the form you will use most.

.card {  position: relative;}.badge {  position: absolute;  top: 12px;  right: 16px;}

05 / 06

The stacking order is z-index

When elements overlap, which comes in front is set with z-index. The bigger the number, the further forward.

z-index only works on an element that has a position, so write them together.

.label {  position: absolute;  z-index: 2;}

06 / 06

Careful not to shift too far

A floating element does not push others aside, so it can land on top of the writing and make it unreadable.

Always check it with your eyes in the preview. If it goes wrong, you only have to put the numbers back. Have a go.