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

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

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

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, with z-index:12

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

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