position定位详解

定位 position

position的值

1.static 定位默认值，也就是没有定位，是文档流
2.relative 相对定位，顾名思义，相对自己进行定位，脱离文档流
3.absolute 绝对定位
4.fixed 固定定位

捆绑属性

left right top bottom

相对定位

进行定位后，根据自身未做定位前的位置为基准进行位置偏移，此时left的值指偏移后左边离原来位置左边的距离，其它值同理，相对定位后，原本位置保留不被其它元素占据，所以一般相对定位只用于微调，不然会出现大片留白，不利于布局

绝对定位

进行定位后脱离文档流，相对于有position非static值的祖级进行定位，默认一它的左上角为基准点，如果祖级没有，就以body进行定位，绝对定位不会保留它原来的位置，所以它是可以覆盖在别的元素上的，同时，元素转为行内块，宽高变为内容宽高。

固定定位

固定定位是固定的，那么它固定在哪？毫无疑问，它是固定在窗口（可视区）的，也就是说，除非你给它设置大负值，或者隐藏，不然它会一直在窗口的这个位置，你会一直看见它，哪怕你滚动下去，他依旧在窗口的那个位置，不会把它滚没了。同时，元素转为行内块，宽高变为内容宽高。