Effect of z-index value to RP and AP blocks

by aplus

  1. Starting setup
  2. Apply z-index:1 to AP1
  3. Apply z-index to both AP blocks
  4. Apply z-index:11 to RP1
  5. Apply z-index:21 to RP1
  6. Apply higher z-index to RP2 than to RP1, but identical z-index to AP1 and AP2
  7. Apply z-index where RP2 > RP1, and AP2 < AP1, both being higher then any RP's
  8. Conclusion

If I give z-index:21 to RP1, while AP2 still has 20, then I finally get correct standard-compliant behavior.

On the following two pages, I simply play with various values for RP and AP elements, just for fun.

This is relatively positioned block, with z-index:21

This is absolutely positioned block, with z-index:10

Content between the RP blocks... Content between the RP blocks... Content between the RP blocks... Content between the RP blocks...

This is relatively positioned block

This is absolutely positioned block, with z-index:20

Content after the second RP block... Content after the second RP block... Content after the second RP block... Content after the second RP block...

Continue to next page >>

RP = relatively positioned element
AP = absolutely positioned element