阿基米德说“给我一个支点,我能翘起整个地球”，在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定位的四种属性”
联系客服
