定位position

1.静态定位 static

2.相对定位 relative：

相对于原本位置进行定位，top、bottom、left、right的偏移位置是相对于父元素来说的

元素原本的位置依然存在，不会影响其他元素的位置，只是将元素层次提升，即不脱离文档流，也不改变元素的内联、块的性质

3.绝对定位 absolute：

相对于最近定位的祖先元素，如果没有就相对于浏览器窗口。

会提升层次，会脱离文档流

会改变元素性质：内联->块 (宽度100%需要注意)

4.固定定位 fixed (特殊的决对定位)

不再占有原来的位置，脱离文档流。相对于浏览器窗口，不随滚动条移动

IE6不支持fixed

5.position:sticky是css定位新增属性；

不脱离文档流

可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。用于做吸顶效果。

注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上，默认是父元素。（但是当该祖先的 overflow 是 hidden时，即这个祖先不是真的滚动祖先，将会阻止所有“ sticky ”行为。而当overflow是scroll, auto,或 overlay时，则sticky生效）

当relative祖先元素设置了padding时，absolute子元素不设top、left时，还是在原位置，设置这两个值以后会忽略padding，从border内作为定位原位置。

<div style="position: relative;padding-top:100px;background-color: red;border: 50px solid blue;">

  <div style="position: absolute;background-color: green; width: 50px;height: 50px;">                
  </div>

</div>

<div style="position: relative;padding-top:100px;background-color: red;border: 50px solid blue;">

  <div style="position: absolute; 
    top:0;
    background-color: green; width: 50px;height: 50px;">                
  </div>

</div>