* {Margin: 0; padding: 0; border: 0 ;}
Html, body {height: 100% ;}
# Box_2 {height: 100%; background: #000 ;}
Absolute position overlap effect
# Box_1 {position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: # f00; z-index: 2 ;}
# Box_2 {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 1 ;}
Vertical height and relative size
# Box_1 {position: absolute; top: 0; left: 0; width: 100%; height: 30%; background: # f00; z-index: 2 ;}
# Box_2 {position: absolute; left: 0; top: 30%; width: 100%; height: 70%; background: #000; z-index: 1 ;}
Effect of relative horizontal width
# Box_1 {position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: # f00; z-index: 2 ;}
# Box_2 {position: absolute; top: 0; right: 0; width: 70%; height: 100%; background: #000; z-index: 1 ;}
In practical applications, there are many changes that can be easily implemented without nesting absolute or relatively multiple columns in vertical and horizontal la s.
IE6.0 and FF1.5 passed the test