doc_inspector_highlighter-geometry_01.html (1722B)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>geometry highlighter test page</title> 6 <style type="text/css"> 7 html, body { 8 margin: 0; 9 padding: 0; 10 } 11 12 .relative-sized-parent { 13 position: relative; 14 border: 2px solid black; 15 border-radius: 25px; 16 } 17 .size { 18 width: 300px; 19 height: 300px; 20 } 21 22 .positioned-child { 23 position: absolute; 24 background: #f06; 25 } 26 .pos-top-left { 27 top: 30px; 28 left: 25%; 29 } 30 .pos-bottom-right { 31 bottom: 10em; 32 right: -10px; 33 } 34 35 .inline-positioned { 36 background: yellow; 37 } 38 39 #absolute-container { 40 position: absolute; 41 top: 50px; 42 left: 400px; 43 width: 500px; 44 height: 400px; 45 border: 1px solid black; 46 } 47 48 .absolute-all-4 { 49 position: absolute; 50 top: 10px; 51 left: 10px; 52 bottom: 200px; 53 right: 300px; 54 border: 1px solid red; 55 } 56 57 .relative { 58 position: relative; 59 top: 10%; 60 left: 50%; 61 height: 10px; 62 border: 1px solid blue; 63 } 64 65 .fixed { 66 position: fixed; 67 top: 400px; 68 left: 0; 69 width: 50px; 70 height: 50px; 71 border-radius: 50%; 72 background: green; 73 } 74 </style> 75 </head> 76 <body> 77 <div id="node1" class="relative-sized-parent size"> 78 <div id="node2" class="positioned-child pos-top-left pos-bottom-right"> 79 <div id="node3" class="inline-positioned positioned-child pos-top-left" style="width:50px;height:50px;"></div> 80 </div> 81 </div> 82 83 <div id="absolute-container"> 84 <div class="absolute-all-4"></div> 85 <div class="relative"></div> 86 </div> 87 88 <div class="fixed"></div> 89 </body> 90 </html>