block-in-inline-2-ref.html (1137B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <title>CSS Test: Sticky Positioning - block inside inline, normal position</title> 7 <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com"> 8 <link rel="stylesheet" type="text/css" href="ahem.css"> 9 <style> 10 #scroll { 11 height: 100px; 12 overflow: hidden; 13 font: 20px/1 Ahem; 14 } 15 #contain { 16 height: 100px; 17 } 18 .sticky { 19 position: relative; 20 top: -10px; 21 } 22 .notsticky { 23 position: relative; 24 top: -30px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="scroll"> 30 <div style="height: 20px"></div> 31 <div id="contain"> 32 <span class="notsticky">before inline</span> 33 <span class="sticky">before block</span> 34 <div><span class="sticky">in block</span></div> 35 <span class="sticky">after block</span> 36 <span class="notsticky">after inline</span> 37 </div> 38 <div style="height: 100px"></div> 39 </div> 40 </body> 41 </html>