# Position定位
`CSS`中`position`属性是比较常用的元素定位方案，`position`常用的取值有`static`、`relative`、`absolute`、`fixed`、`sticky`、`inherit`。
## static
`static`属性是`HTML`元素的默认值，即没有定位，遵循正常的文档流对象，对于`top`、`bottom`、`left`、`right`、`z-index`属性的设置都被忽略。
文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
```html
static
```
## relative
`relative`是相对定位，元素的位置是相对其原本位置进行偏移，其不脱离文档流，对于`top`、`bottom`、`left`、`right`、`z-index`属性的设置有效，设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。
```html
relative
对比查看效果 元素原本占据空间没有变化 但relative会有偏移
```
## absolute
`absolute`是绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于``，通常的使用方案是在外层嵌套一层`relative`相对定位元素作为父元素，再设置绝对定位元素的偏移将会相对于外层的`relative`元素进行偏移，绝对定位完全脱离文档流与文本流，不占据文档空间，对于`top`、`bottom`、`left`、`right`、`z-index`属性的设置有效。
```html
```
## fixed
`fixed`是固定定位，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在`