CSS positioning / relative absolute fixed and static

January 17, 2016

Alyssa Page

position: static;

Let's start with static positioning, the default. Since it is the default position there is no need to declare it unless it is to override previous positioning. This means the element is not positioned and instead occurs where it normally would in the document. Remember documents are read from top to bottom.

position: relative;

If you stipulate position: relative then you can move it from the top, right, bottom or left of where it would normally occur. ie. div { position: relative; top: 30px; } will move the div 30 pixels down from the top of where it would have otherwise been positioned. You can also use negative numbers for example to move left 15px use left: -15 after declaring position: relative;.

position: abosolute;

Declaring absolute position removes the element from the document flow and places it exactly where you indicate it should go. Again use top, right, bottom and left to do this.

position: fixed;

A fixed position element stays in the same position relative to the view port at all times even when scrolling. To position a fixed position element you will use top, right, bottom and left to tell it where to reside.