Stacking Order Tests

The following tests examine stacking order of positioned vs. non-positioned elements when no z-index is specified.

• each test is comprised of divs using class attributes: "a" always appears first in the markup, "b" is second
• if included, "c" is third
• each resides within a relative-position "container" which establishes a new positioning context

#test1

.a {}
.b {}

#test2

.a {}
.b {position:absolute; top:0; left:0;}

#test3

.a {position:absolute; top:0; left:0;}
.b {}

#test4

.a {position:absolute; top:0; left:0;}
.b {position:absolute; top:0; left:0;}

#test5

.a {position:relative;}
.b {position:absolute; top:0; left:0;}

#test6

.a {position:absolute; top:0; left:0;}
.b {position:relative;}

#test7

.a {}
.b {position:relative; top:-.75em;}

#test8

.a {position:relative; top:.75em;}
.b {}

#test9

.a {position:absolute; top:0; left:0;}
.b {position:relative;}
.c {}

#test10

.a {position:absolute; top:0; left:0;}
.b {}
.c {position:relative;}