Page window structure:
outermost browser window (viewport)
initially contained blocks
HTML root element
body
............
. 1 <! DOCTYPE HTML > 2 < HTML > . 3 < head > . 4 < Meta charset = "UTF-. 8" > . 5 < title > </ title > . 6 < style > . 7 . 8 / * . 9 configuration window page: 10 most outer browser window (viewport) 11 initially contained block 12 is the HTML root element 13 is body 14 ............ 15 16 */ 17 18 19 html{ 20 border: 1px blue solid; 21 /* position: relative; */ 22 margin: 100px; 23 } 24 25 body{ 26 border: 1px red solid; 27 /* position: relative; */ 28 margin: 100px; 29 } 30 31 .box1{ 32 width: 300px; 33 height: 300px; 34 background-color: #bfa; 35 36 margin: 100px; 37 38 /* position: relative; */ 39 } 40 41 .box2{ 42 width: 100px; 43 height: 100px; 44 background-color: orange; 45 46 position: fixed; 47 48 top: 0; 49 left: 0; 50 } 51 52 </style> 53 </head> 54 <body> 55 56 <div class="box1"> 57 <div class="box2"></div> 58 </div> 59 60 </body> 61 </html>
1. html element comprising a block not
2. When the opening is positioned relative to the child element comprising positioning block, we usually set to the relative positioning of the body.