doc_inspector_highlighter-geometry_02.html (3580B)
1 <!doctype html><html><head><meta charset="UTF-8"></head><body class="header"> 2 3 <style> 4 .fixed { position: fixed; top: 40px; right: 20px; margin-top: 20px; background: #ccf; } 5 .fixed-bottom-right { position: fixed; bottom: 4em; right: 25%; margin: 20px; background: #ccf; } 6 7 #absolute-container { position: relative; height: 150px; margin: 20px; } 8 .absolute { position: absolute; top: 20px; left: 400px; background: #fcc; } 9 .absolute-bottom-right { position: absolute; bottom: 20px; right: 50px; background: #fcc; } 10 .absolute-all-4 { position: absolute; top: 100px; bottom: 10px; left: 20px; right: 700px; background: #fcc; } 11 .absolute-negative { position: absolute; bottom: -25px; background: #fcc; } 12 .absolute-width-margin { position: absolute; top: 20px; right: 20px; width: 450px; margin: .3em; padding: 10px; border: 2px solid red; box-sizing: border-box; background: #fcc; } 13 14 .relative { position: relative; top: 10px; left: 10px; background: #cfc;} 15 .relative-inline { position: relative; top: 10px; left: 10px; display: inline; background: #cfc;} 16 17 .static { position: static; top: 10px; left: 10px; background: #fcf; } 18 .static-size { position: static; top: 10px; left: 10px; width: 300px; height: 100px; background: #fcf; } 19 20 #sticky-container { 21 margin: 50px; 22 height: 400px; 23 width: 400px; 24 padding: 40px; 25 overflow: scroll; 26 } 27 #sticky-container dl { 28 margin: 0; 29 padding: 24px 0 0 0; 30 } 31 32 #sticky-container dt { 33 background: #ffc; 34 border-bottom: 1px solid #989EA4; 35 border-top: 1px solid #717D85; 36 color: #FFF; 37 font: bold 18px/21px Helvetica, Arial, sans-serif; 38 margin: 0; 39 padding: 2px 0 0 12px; 40 position: sticky; 41 width: 99%; 42 top: 0px; 43 } 44 45 #sticky-container dd { 46 font: bold 20px/45px Helvetica, Arial, sans-serif; 47 margin: 0; 48 padding: 0 0 0 12px; 49 white-space: nowrap; 50 } 51 52 #sticky-container dd + dd { 53 border-top: 1px solid #CCC 54 } 55 </style> 56 57 <h1>Positioning playground</h1> 58 <p>A demo of various positioning schemes: <a href="http://dev.w3.org/csswg/css-position/#pos-sch">http://dev.w3.org/csswg/css-position/#pos-sch</a>.</p> 59 <p>absolute, static, fixed, relative, sticky</p> 60 61 <h2>Absolute positioning</h2> 62 <div class="absolute"> 63 Absolute child with no relative parent 64 </div> 65 <div id="absolute-container"> 66 <div class="absolute"> 67 Absolute child with a relative parent 68 </div> 69 <div class="absolute-bottom-right"> 70 Absolute child with a relative parent, positioned from the bottom right 71 </div> 72 <div class="absolute-all-4"> 73 Absolute child with a relative parent, with all 4 positions 74 </div> 75 <div class="absolute-negative"> 76 Absolute child with a relative parent, with negative positions 77 </div> 78 <div class="absolute-width-margin"> 79 Absolute child with a relative parent, size, margin 80 </div> 81 </div> 82 83 <h2>Relative positioning</h2> 84 <div id="relative-container"> 85 <div class="relative"> 86 Relative child 87 </div> 88 <div style="width: 100px;"> 89 <div class="relative-inline"> 90 Relative inline child, across multiple lines 91 </div> 92 </div> 93 <div style="position:relative;"> 94 <div class="relative"> 95 Relative child, in a positioned parent 96 </div> 97 </div> 98 </div> 99 100 <h2>Fixed positioning</h2> 101 <div id="fixed-container"> 102 <div class="fixed"> 103 Fixed child 104 </div> 105 <div class="fixed-bottom-right"> 106 Fixed child, bottom right 107 </div> 108 </div> 109 110 <h2>Static positioning</h2> 111 <div id="static-container"> 112 <div class="static"> 113 Static child with no width/height 114 </div> 115 <div class="static-size"> 116 Static child with width/height 117 </div> 118 </div> 119 120 </body></html>