Absolute and Relative Positioning Test Page

You have 5 levels of nested HTML div elements (see source on bottom), each has another color.
You can change CSS properties of any div by using the according input fields.

Level 0
Level 1
Level 2
Level 3 / 1
Level 4 / 1
Level 4 / 2
Level 3 / 2

CSS Style Properties

Pin Properties Panel
Level 0
position:
height:
width:
top:
left:
right:
bottom:
Level 1
position:
height:
width:
top:
left:
right:
bottom:
Level 2
position:
height:
width:
top:
left:
right:
bottom:
Level 3 / 1
position:
height:
width:
top:
left:
right:
bottom:
Level 4 / 1
position:
height:
width:
top:
left:
right:
bottom:
Level 4 / 2
position:
height:
width:
top:
left:
right:
bottom:
Level 3 / 2
position:
height:
width:
top:
left:
right:
bottom:

HTML Source of Test Panel

  <div id="level-0">
    Level 0
  
    <div id="level-1">
      Level 1
      
      <div id="level-2">
        Level 2
        
        <div id="level-3_1">
          Level 3 / 1
          
          <div id="level-4_1">
            Level 4 / 1
          </div>
          
          <div id="level-4_2">
            Level 4 / 2
          </div>
          
        </div>
        
        <div id="level-3_2">
          Level 3 / 2
        </div>
          
      </div>
      
    </div>
    
  </div>

ɔ⃝ Fritz Ritzberger, 2015-07-19