css定位 position absolute relative fixed

position absolute

1. position absolute,不设置lrtb(left, right, top, bottom)时，元素脱标，位置不变，但是实际浮动在此位置上，不占位置，并且浮动于普通流之上，需要通过z-index设置为负数浮在标准流（普通流）之下。
2. 设置lrtb时，若没有父元素有定位，则相对于窗口（相对于页面的）进行定位，若存在父元素定位（relative, fixed, absolute）,则子元素是相对于父元素定位。
3. 若有两个子元素有定位，并且设置了lrtb,则后来者居上！
4. 上述情况如果不写top，距离顶部还是元素之前的位置；
5. 设置此属性的元素宽高属性会生效；

position relative

1. 只设置position:relative 时，元素还是在当前位置，并且不会脱离标准流，一旦元素设置了此属性，则层级高于标准流，可以通过z-index设置层级高低；·
2. 设置lrtb后，若父元素无定位元素，则相对于原来的位置定位，有可能产生溢出，因为元素不脱标，父元素定位到哪，子元素也会定位到哪；
3. 如果是行内元素，使用该属性，宽高是不生效的；

定位相碰

1. 子绝父定位，但通常都是子绝父相；逐层往上查找，找到定位的父元素，若查找到根元素都无父元素定位，则相对于窗口进行定位；

position fixed

1. 设置了该属性的元素都是相对于视口定位（不会根据父元素进行定位）；根据视口位置固定，并且它会使元素脱离标准流；
2. 设置此属性的元素宽高会生效；

使用该属性会出现的bug以及解决方法：

问题（一）：
红色条为固定定位的元素，蓝色区域滚不下去，有一部分被遮住了；
解决： 使用margin-bottom作用到蓝色元素上，高度为红色条的高度即可；若固定在顶部，则同理；
问题（二）：滚动元素position:absolute时，要设置z-index： -1;防止滚动元素将固定元素覆盖（因为上文所说的同为脱标元素，后来者会居上）

position static

1. 设置元素的此属性与不设是一样的，一般配合js来取消定位；

透彻研究定位隐藏的秘密

1. 同时设置lrtb时，只有left 和 top起作用；如果同时设置了四个值，但需要right 或者bottom 起作用，则需要将left 或者top值设为auto；
2. 若lrbt都为auto时，相当于没有设置；
3. margin-left 和 left 会叠加。
4. 如果需要fixed是相对于其父元素固定定位，则不要设置lrbt这几个值，
5. 一般情况都会将absolute 放入relative父元素中，相对于其父元素进行变动；