stacking-context.html (1029B)
1 <!doctype HTML> 2 <title>Test that the foreignObject element is a stacking context</title> 3 <link rel="match" href="stacking-context-ref.html"> 4 <link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> 5 <style> 6 * { 7 margin: 0; 8 } 9 .el { 10 width: 50px; 11 height: 60px; 12 } 13 14 </style> 15 <!-- Test that the <foreignObject> root element is a stacking context, so z-index here 16 has no effect on order w.r.t. #top, but still does for stacking under 17 foreignObject --> 18 <svg style="width: 50px; height: 50px; overflow: visible; display: block"> 19 <foreignObject width=100 height=200> 20 <div class="el" 21 style="position: absolute; z-index: 1; top: 40px; left: 10px; border: 1px solid black; background: lightblue"></div> 22 <div class="el" 23 style="position: absolute; z-index: 2; top: 5px; left: 5px; border: 1px solid black; background: lightgreen"></div> 24 </foreignObject> 25 </svg> 26 <div id=top class="el" style="position: relative; background: lightgray"></div>