isolation-establishes-stacking-context.html (788B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Compositing and Blending: The isolation property</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/compositing-1/#isolation"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content="For CSS, setting `isolation` to `isolate` will turn the element into a stacking context."> 8 9 <style> 10 #parent { 11 width: 100px; 12 height: 100px; 13 isolation: isolate; 14 background: red; 15 } 16 #child { 17 width: 100px; 18 height: 100px; 19 position: relative; 20 z-index: -1; 21 background: green; 22 } 23 </style> 24 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div id="parent"> 27 <div id="child"></div> 28 </div>