CSS——相对定位、绝对定位、固定定位

相对定位：

   position:relative

        当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流，除非设置其z-index值为负值。

        并且我们发现当相对定位元素进行位移后，表面来看已经脱离了文本流，但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高。

 

绝对定位： 

   position:absolute

        相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这个位置不随他的移动而改变。

        如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位

        在父层position属性为默认值时，子层定位的坐标原点以body的坐标原点为起始。

        当我们希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点时，我们可以为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。

        但是要注意的是，这个参照点并不是父级的坐标原点，而是父级块的padding左上边缘点。      

固定定位：  

   position:fixed

        这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。换句话说，相对浏览器窗口定位.页面如何滚动,这个盒子显示的位置不变

 

要注意的点：

        1.绝对定位之后,标签就不区分所谓的行内元素,块级元素了,不需要display:block;就可以设置宽高了。

        2.如果用top描述,那么定位参考点就是页面的左下角,而不是浏览器的左上角,如果用bottom描述,参考的是浏览器首屏大小对应的页面左下角。

        3.绝对定位的盒子居中：绝对定位之后,所有标准流的规则,都不适用了.所以margin:0 auto;失效。

          解决方法：当做公式记一下来.就是left:50%;margin-left:负的宽度的一半.

        4.固定定位不兼容微信。

 

 

 

摘自:

https://blog.csdn.net/hackprogramer/article/details/27569233

https://www.cnblogs.com/gchlcc/p/6295199.html