position属性值4缺一带你了解相对还是绝对抑或是固定定位
阿基米德说“给我一个支点,我能翘起整个地球”，在HTML页面中，给你一个坐标，可以把任何一个元素定位目标点，这就是定位！CSS有三种基本的定位机制：相对定位、绝对定位、固定定位，决定定位的position属性的值有static默认标准流，当然这个就不用多说了；fixed固定定位，releative相对定位，absoulte绝对定位，结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减，坐标起点是原来所在位置;3.absolute绝对定位找最近的position属性，没有的话，就找父集进行定位。代码展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>position属性值4缺一带你了解相对还是绝对抑或是固定定位</title> 7 <style type="text/css"> 8 div{ 9 width: 200px; 10 height: 200px; 11 color: #fff; 12 } 13 .box1{ 14 width: 120px; 15 height: 50px; 16 line-height: 50px; 17 background-color: darkviolet; 18 position: fixed; 19 bottom: 100px; 20 right: 50px; 21 text-align: center; 22 border-radius: 5px; 23 } 24 /* 固定定位,常见页面在线客服固定在某一个位置，怎么解决？ */ 25 /*配合定位 top bottom left right坐标点分2组 top bottom / left right*/ 26 /*bottom: 100px; 底部往上100px*/ 27 .box2{ 28 background-color: red; 29 /* position: relative; 30 left:200px; 31 top:30px; */ 32 } 33 /*相对定位*//*相对于自身位置自增或者自减，坐标起点是原来所在位置*/ 34 /*向元素的原始上侧位置增加30像素。*/ 35 /*向元素的原始左侧位置增加200像素。*/ 36 .box3{ 37 background-color: chartreuse; 38 /* position: absolute; 39 top: 100px; 40 left: 100px; */ 41 } 42 /*发现box3添加绝对定位后位置飘到box2上面去了,box4上来了，box3的参考坐标点是body*/ 43 44 .box4{ 45 background-color: crimson; 46 } 47 .box5{ 48 /* bottom: 300px; 49 right: 400px; 50 position: fixed; */ 51 margin:0 auto; 52 position: relative; 53 background-color: darkmagenta; 54 } 55 .box6{ 56 width: 100px; 57 height: 100px; 58 background-color:blue; 59 position: absolute; 60 top: 100px; 61 left: 100px; 62 } 63 /*结论absolute绝对定位找最近的position属性，没有的话，就找父集*/ 64 </style> 65 </head> 66 <body> 67 <!--情景一绝对定位在外面--> 68 <div class="box1">hello!固定定位</div> 69 <!-- br*100 回车快捷键 展示如下--> 70 <div class="box2"></div> 71 <div class="box3"></div> 72 <div class="box4"></div> 73 74 <!--情景二绝对定位在里面--> 75 <div class="box5"> 76 <div class="box6">绝对定位</div> 77 </div> 78 </body> 79 </html>
拓展：东北玛丽的小笔记该篇“position定位的四种属性”
