写在前面：学习CSS定位的总结和心得，希望大家互相学习讨论，还请大家多多指教。下面开始我的表演^-^：CSS中的三种定位：position:relative;//相对定位position:absolute;//绝对定位position:fixed;//固定定位实验原代码：.box1{width:200px;高度：200px；背景色：#33ccff；}.box2{宽度：200px；高度：200px；背景色：#ff6699；}.box3{宽度：200px；高度：200px；}原效果展示：1.相对定位[position:relative;]调整相对于其原位置的位置，即以原位置为基准微调元素的位置。为了便于理解，做如下实验：我们现在将方框2相对定位，并向下和向右调整位置。.box2{位置：相对；宽度：200px；高度：200px；背景色：#ff6699；左：200px；顶部：200px；}我们可以看到box2的位置已经调整了，但是原来的位置还是空的。这就是相对定位不脱离标准文档流的具体体现。我们把盒子形象化为一个人，也就是可以理解为人还在原来的位置，但是神却去了另一个地方。相对定位的目的：1）可以微调元素的位置；2）可作为绝对定位的参考。2.绝对定位[position:absolute;]绝对定位比相对定位更灵活。绝对定位后，脱离标准文档流。为了便于理解，我们做如下实验：.box2{position:absolute;宽度：200px；高度：200px；背景色：#ff6699；左：200px；顶部：200px；}可以看出因为box2的绝对定位脱离了标准流程，box3占据了原来box2的位置。另外，box2的参考点发生了变化，我们通过下面的实验来理解：(1)用top描述时的参考点：改变1：.box2{position:absolute;宽度：200px；高度：200px；背景色：#ff6699；左：50px；顶部：50px；}变体2：.box2{位置：绝对；宽度：200px；高度：200px；背景色：#ff6699；左：200px；顶部：200px；}变体3:body{height:1000px;}.box2{位置：绝对；宽度：200px；高度：200px；背景色：#ff6699；左：400px；顶部：400px；从2和3对比可以发现，此时绝对定位运动的参考点在左上角。为了进一步确认，改3滚动页面。经过对比我们可以发现，经过绝对定位后，top属性的移动参考点是页面的左上角。(2)bottom描述时的参考点：变体1：.box2{position:absolute;宽度：200px；高度：200px；背景色：#ff6699；左：50px；底部：50px；}变体2：.box2{位置：绝对；宽度：200px；高度：200px；背景色：#ff6699；左：200px；底部：200px；}变体3：.box2{位置：绝对；宽度：200px；高度：200px；：#ff6699；左：400px；底部：400px；}不滚动滚动条：滚动页面：通过实验对比1、2、3的移动，可以发现绝对定位移动的参考点在左下角。为了进一步确认，更改3滚动页面。经过对比我们可以发现，经过绝对定位后，bottom属性的移动参考点是首屏显示页面的左下角。另外，由于绝对定位脱离了标准流程，margin的居中方式为：0auto；是无效的。我们可以使用其他方法来实现居中。下面只是简单的水平居中。我们做如下实验来实现绝对定位后的水平居中：.box1{position:absolute;宽度：200px；高度：200px；背景色：#33ccff；//实现left:50%;左边距：-100px；}总结：1.绝对定位会脱离标准流；2、top属性设置的参考点是页面的左上角；3、bottom属性设置的参考点是第一屏页面的左下角。4.水平居中的简单实现：left：50%；margin-left：负宽度的一半。3、固定定位[position:fixed;]固定定位的参照对象是浏览器窗口。滚动页面时，始终固定在浏览器的相对位置，不会改变位置，会偏离标准的文档流。为了便于理解，我们做如下实验：.box2{position:fixed;宽度：200px；高度：200px；背景色：#ff6699；}Donotscrollthepage:Scrollthepage:后面会对绝对定位有更深入的理解，本次的学习分享就到此为止。欢迎大家交流，重逢~请戳Github：https://github.com/Hwj1220
