Question
What positioning values should I be familiar with?
Answer
Web developers should be familiar with:
position: static;
- default position
- positioned according to normal flow of HTML document
- offset properties (
top
,right
,bottom
,left
) andz-index
property have no effect
position: relative;
- positioned according to normal flow of the document (not taken out of the normal flow)
- will be affected by offset properties (
top
,right
,bottom
,left
) andz-index
- if offset properties are used, the element will be offset in relation to its default position
position: absolute;
- element is taken out of the normal flow of the document
- positioned in relation to its nearest positioned parent element (grandparent, etc),
- if no positioned parent element exists, the absolutely positioned element will be positioned in relation to the
<html>
element - will be affected by offset properties (
top
,right
,bottom
,left
) andz-index
and
position: fixed;
- element is taken out of the normal flow of the document
- positioned in relation to the viewport of the browser
- will be affected by offset properties (
top
,right
,bottom
,left
) andz-index