popover-stacking-context.html (1000B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <link rel=match href="popover-stacking-context-ref.html"> 7 8 <div popover> 9 Inside popover 10 <div class=z style="z-index: 2; background:lightgreen">z-index 2 11 <div class=z style="z-index: 3; background:lightblue; left: 20px;">z-index 3</div> 12 <div class=z style="z-index: 1; background:pink; top:-20px; left: 10px;">z-index 1</div> 13 </div> 14 <div class=z style="background:green; top:-100px; left: 250px; width: 100px;">Outside</div> 15 Bottom of popover 16 </div> 17 18 <style> 19 [popover] { 20 width: 200px; 21 height: 230px; 22 border: 1px solid red; 23 top:50px; 24 left:50px; 25 } 26 .z { 27 position: relative; 28 border: 1px solid black; 29 padding: 1em; 30 } 31 </style> 32 33 <script> 34 document.querySelector('[popover]').showPopover(); 35 </script>