3dtransform-and-position-sticky-002.html (1241B)
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 transform-style: preserve-3d; 34 } 35 36 #inner2 { 37 background: olive; 38 position: absolute; 39 top: 0; 40 left: 0; 41 transform: rotateX(30deg); 42 } 43 44 </style> 45 46 <div id="outer"> 47 <div id="middle"> 48 <div id="inner1"> 49 </div> 50 <div id="inner2"> 51 </div> 52 </div> 53 </div>