定位布局tips

1.static，relative保持在文档流中。absolute,fixed元素框从文档流完全删除。

2.根元素的包含块是一个矩形,叫做初始化包含块。

3.absolute的元素的位置相对于最近的非static祖先元素，如果元素没有非static的祖先元素，那么它的位置相对于最初的包含块。

4.position不改变自己的子元素与自己的关系，也就是子元素始终跟随自己一起动。

• 如果没有特别设置，position子元素默认继承父元素属性。

4.fixed元素的包含块是视窗本身。

5.绝对定位元素居中问题：

• 已知宽高：

1.  top50%配合负margin-top自身高度的一半。同理水平居中。
2. top:0且bottom:0，配合margin-top:auto且margin-bottom:auto。同理水平居中。

• 未知宽高：

1. top50%配合transformY(-50%)。同理水平居中。
2.  已知高度未知宽度，则top:0且bottom:0，配合margin-top:auto且margin-bottom:auto。

          第二种方法只能让已知的那个方向居中。已知高度未知宽度，则只能垂直居中。已知宽度未知高度，则只能水平居中。因为在未知方向上设置会使元素在未知方向上拉长填满父元素。

6.absolute和fixed定位会让元素转换为block类型。

7.z-index属性只有在relative、absolute、fixed定位时才会起效。