【HTML/CSS】定位方式及区别

1 文档流

文档流是浏览器默认的排版方式
文档流的排版方式是块级元素垂直排布，行内元素和行内块元素水平排布。

2 脱离文档流

脱离文档流是不按照文档流的排版方式进行排版，脱离后，元素不在布局中，不在流中占有位置，处于漂浮状态，后面的文档流中的元素会补上去。

会造成脱离文档流的情况：

1. 浮动：给元素添加float属性，且属性值不为none。
2. 定位：设置position为absolute和fixed。fixed会固定在窗口上，absolute会随着滚动条滚动

元素脱离文档流存在的问题：

1. 会导致父元素高度塌陷可以
2. 通过将父子元素放置在同一个BFC中解决，或者使用清除浮动

3 定位方式

1. static：默认定位值，元素出现在正常的流中，会忽略top,bottom,left,right,z-index的设置
2. relative：相对定位，不会脱离文档流，在文档流中占有位置，可以通过top,bottom,left,right的设置相对于其正常**（原先本身）**位置进行定位。可通过z-index进行层次分级。
3. absolute：绝对定位，会脱离文档流，相对static定位以外的第一个父元素定位。
4. fixed：固定定位，相对于浏览器窗口进行定位。

4 使用场景

1. 设置水平居中

   position:absolute;
   left:50%;
   transform:translateX(-50%)
   

2. 设置垂直居中

   position:absolute;
   top:50%;
   transform:translateY(-50%)