popover-stacking-context-ref.html (790B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel="stylesheet" href="resources/popover-styles.css"> 5 6 <div class="fake-popover"> 7 Inside popover 8 <div class=z style="z-index: 2; background:lightgreen">z-index 2 9 <div class=z style="z-index: 3; background:lightblue; left: 20px;">z-index 3</div> 10 <div class=z style="z-index: 1; background:pink; top:-20px; left: 10px;">z-index 1</div> 11 </div> 12 <div class=z style="background:green; top:-100px; left: 250px; width: 100px;">Outside</div> 13 Bottom of popover 14 </div> 15 16 <style> 17 .fake-popover { 18 width: 200px; 19 height: 230px; 20 border: 1px solid red; 21 top:50px; 22 left:50px; 23 } 24 .z { 25 position: relative; 26 border: 1px solid black; 27 padding: 1em; 28 } 29 </style>