网页的窗口的结构：
最外层 浏览器窗口（视口）
初始包含块
HTML根元素
body
…………
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 9 网页的窗口的结构： 10 最外层 浏览器窗口（视口） 11 初始包含块 12 HTML根元素 13 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元素
2.当开启定位的子元素相对于包含块定位时，我们通常给body设置相对定位。