3dtransform-and-position-sticky-001.html (1209B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 6 <link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets"> 7 <meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky."> 8 <link rel="match" href="3dtransform-and-position-sticky-ref.html"> 9 10 <style> 11 12 div, img { 13 height: 100px; 14 width: 100px; 15 } 16 17 #outer { 18 transform-style: preserve-3d; 19 perspective: 300px; 20 } 21 22 #middle { 23 transform-style: preserve-3d; 24 position: relative; 25 } 26 27 #inner1 { 28 background: aqua; 29 /* isn't really sticky because of the containing block established by transform and by transform-style */ 30 position: sticky; 31 top: 0; 32 transform: translateZ(0); 33 } 34 35 #inner2 { 36 background: olive; 37 position: absolute; 38 top: 0; 39 left: 0; 40 transform: rotateX(30deg); 41 } 42 43 </style> 44 45 <div id="outer"> 46 <div id="middle"> 47 <div id="inner1"> 48 </div> 49 <div id="inner2"> 50 </div> 51 </div> 52 </div>