1, static (static positioning):
Defaults. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). Refer to the previous essay.
2. Relative (relative positioning):
An element positioned relative is out of the normal text flow, but its position in the text flow is still there, so it is not out of the document flow itself.
Positioned relative to its normal (original) position by the settings of top, bottom, left, and right. Hierarchical grading can be done by z-index.
<style type="text/css"> .static1{ height:80px; background-color: red; } .relative{ height:80px; position:relative; top:40px; left:40px; background-color: black; } .static2{ height:80px; background-color: blue; } </style> </head> <body> <div class="static1"></div> <div class="relative"></div> <div class="static2"></div> </body>
