Positioning items around a web page is done with the position property.
When to use
Any time you want to change the layout of a web page, you'll likely use the position property.
There are four main positions:
To move things around with positions, use "top", "bottom", "left", and "right" properties with pixels to designate movement.
position: static; is the default and is a normal position.
position: relative; is relative to the normal position. It takes the normail position and it moves it around based on whether you use top, bottom, left or right.
position: fixed; is fixed in a specific spot. It stays fixed no matter what, so if you have a scroll bar on your page, if you scroll the fixed stays put.
position: absolute; is usually used with position: relative; and moves around based on the ralative position.
Hints & tips
- position: static;
- position: relative;
- position: fixed;
- position: absolute;
Lesson notes are only available for subscribers.