Lets take a look at this code: HTML:
|
<html> <head></head> <body> <p>body content</p> <div class="block1">block1</div> <div class="block2">block1</div> <div class="float"> <p>float</p> <span> class="inline">inline</span> </div> <div class="position">position</div> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
|
.block1{ background: pink; } .block2{ background: red; margin: -60px 0 0 20px; } .float{ background: lightblue; float: left; margin: -150px 0 0 100px; } .inline{ background: blue; color: white; padding: 10px 40px 10px 10px; } .position{ background: orange; position: relative; left: 180px; top: -165px; height: 110px; } |
The natural staking order of elements in this piece of code is (in ascending order in the stack): The root element (<html>) .. this is at the bottom of stack..level 0 The viewport (<body>) Block level elements in the normal page flow block1 is […]