css定位

定位分为静态定位，相对定位，绝对定位，固定定位四种。
1.静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

• 在静态定位模式，无法通偏移属性（top、bottom、left或right）来改变元素的位置。
• PS：设置跟不设置其实一个样儿！

2.绝对定位（absolute）

绝对定位从文档流脱出，使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级元素没有设置定位属性，则依据body元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

是将元素相对于它在标准流中的位置进行定位，通过设置边偏移属性（left、top、right、bottom值）可将其移至相对于==它自己原来的位置==的定位，不会破坏正常的布局流，它在文档流中的位置仍然保留。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

1. 首先left 50% 父盒子的一半大小
2. transform:translate(-50%)；居中显示

3.相对定位

相对对位元素不可层叠，依据left、right、top、bottom等性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

1. 相对定位通过偏移改变位置，但原来的的位置继续占有（人走了，位置还占着）

4.固定定位（fixed）

固定定位与绝对定位类似，但是它相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

1.固定定位元素跟父元素没有关系，只认浏览器

2.固定定位完全脱标，不占有位置，不随着滚动条滚动。

 子绝父相

子级是绝对定位的话， 父级要用相对定位。绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

因为子级是绝对定位，不会占有位置， 所以，可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是相对定位. 这就是子绝父相的由来。