1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 font-size:60px; 9 } 10 .box1 { 11 width:100px; 12 height:100px; 13 background-color:red; 14 } 15 .box2 { 16 width:100px; 17 height:100px; 18 background-color:orange; 19 position:relative; 20 /* 21 定位(position) 22 -定位是一种更加高级的布局手段 23 -通过定位可以将元素摆放到页面的任意位置 24 -使用position属性来设置定位 25 -可选值 26 -static默认值，元素是精致的没有开启定位 27 -relative开启元素的相对定位 28 -absolute开启元素的绝对定位 29 -fixed开启元素的固定定位 30 -sticky开启元素的粘制定位 31 -相对定位 32 当元素的position属性设置为relative时则开启了元素的相对定位 33 相对定位的特点： 34 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化 35 2.相对定位是参照与元素在文档六中的位置进行定位的 36 3.相对定位会提升元素的层级 37 4.相对定位不会是元素脱离文档流 38 5.相对行为不会改变元素的性质，块元素还是块元素，行内元素还是行内元素 39 偏移量(offset) 40 -可以通过偏移量来设置元素的位置 41 -top 42 -bottom 43 -left 44 -right 45 -绝对定位 46 -当元素的position属性设置为absilute时，则开启了元素的绝对定位 47 -绝对定位的特点： 48 -1.开启绝对定位后，如果不设置偏移量元素的位置不会发生改变 49 -2.开启绝对定位之后，元素会从文档流中脱离处理啊 50 -3.绝对定位会改变元素的性质，行内变成块，块的宽和高被内容撑开 51 -4.绝对定位会使元素提升一个层次 52 -5.绝对定位元素是相对于其包含块进行定位的 53 包含块(containing block): 54 -正常情况下： 55 包含块就是离当前元素最近的祖先块元素 56 -绝对定位的包含块： 57 包含块就是离它最近的开启了定位的祖先元素 58 如果所有的祖先元素都没有开启定位则根元素就是它的包含块 59 html(根元素，初始包含块) 60 61 -固定定位 62 -将元素的position设置为fixed则开启了元素的固定定位 63 -固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样 64 唯一不同的是固定定位永远在浏览器的可是窗口进行定位 65 固定定位的元素不会随网页的滚动条滚动 66 -粘滞定位 67 当元素的position属性设置为sticky时则开启了元素的粘值定位 68 粘滞定位和相对定位的特点基本一致 69 不同的是粘滞定位可以在元素到达某个位置之后将其固定 70 71 */ 72 position: absolute; 73 left:100px; 74 top:-100px; 75 } 76 .box3 { 77 width:100px; 78 height:100px; 79 background-color:yellow; 80 } 81 </style> 82 </head> 83 <body> 84 <div class="box1">1</div> 85 <div class="box2">2</div> 86 <div class="box3">3</div> 87 </body> 88 </html>= ~ ~ ~ ~ ~