【CSS】CSS四种定位方式

静态定位（不常用）

position：static

默认值，没有定位

自动分配在一个合适的地方

这种定位方式用margin来改变位置，对left、top、z-index等设置值无效

不脱离标准文档流

相对定位

position：relative

不脱离标准文档流

不影响周围元素

相对于自己的位置进行定位

举例：

红框中的父元素使用相对了定位，而它的子元素（图片、文字）则使用绝对定位

相对定位和绝对定位一般都是一起出现，绝对定位需要相对定位作为参照物对自己定位

一般我们会使用相对定位处理父元素，然后再用绝对定位对子元素进行处理，就可以在父元素内将子元素放到任意位置

绝对定位

position：absolute

脱离标准文档流

如果元素没有已定位的祖先元素，会相对body左上角进行偏移

以最近的已定位的祖先元素进行定位（搭配相对定位使用）

固定定位

position：fixed

脱离标准文档流

生成绝对定位的元素，相对于body左上角进行偏移（相对于浏览器窗口进行定位）

举例：

页面侧边的导航栏一般就是使用固定定位实现

因为它是相对于浏览器窗口进行定位，所以在我们滚动页面时，它的位置不会改变