clipping-and-zindex-1.html 674 B

1234567891011121314151617181920
  1. <!DOCTYPE HTML>
  2. <title>Test for z-index relationship to border-radius clipping of overflow</title>
  3. <style>
  4. #one { position: absolute; z-index: 2; background: blue;
  5. top: 50px; left: 50px; width: 100px; height: 100px }
  6. #twoouter { position: absolute; border-radius: 15px; overflow: hidden;
  7. top: 25px; left: 75px; width: 100px; height: 100px }
  8. #twoinner { position: relative; z-index: 1; height: 100px; background: fuchsia }
  9. #three { position: absolute; z-index: 0; background: yellow;
  10. top: 75px; left: 100px; width: 100px; height: 100px }
  11. </style>
  12. <div id="one"></div>
  13. <div id="twoouter"><div id="twoinner"></div></div>
  14. <div id="three"></div>