css中默认的定位方式为static，如果不是static了，那么就说明这个元素被定位了，定位方式有很多种，简单介绍一下

相对定位

相对于自己原来的位置进行比较，仍然占据文档流的位置

.parent {
  position: relative;
}

.child {
  position: relative; /* 默认是 static，将其改为 relative */
  top: 20px;
  left: 30px;
}

绝对定位

与自己最近的相对定位祖先元素进行定位

.parent {
  position: relative; /* 绝对定位相对于其最近的相对定位祖先元素，如果没有，相对于文档根元素（<html>）*/
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

固定定位

相对于浏览器视窗来定位，脱离文档流

.fixed-element {
  position: fixed;
  top: 0;
  right: 0;
}

粘性定位

新特性，有些浏览器可能不支持

相当于相对定位加固定定位，如果是能看得见的地方，就是相对定位，如果脱离了视窗，就是固定定位

.sticky-element {
  position: sticky;
  top: 10px;
}

弹性定位

适用于flex布局

在弹性布局中，子元素的定位方式由其父元素的 display 属性决定

.flex-container {
  display: flex;
}

.flex-item {
  position: static; /* 默认为 static，即不进行特殊定位 */
}

如果父容器设置了定位方式，那么子容器就成了弹性元素，

栅格定位

.grid-container {
  display: grid;
}

.grid-item {
  position: relative; /* 默认为 relative，相对于其正常位置定位 */
}

在网格布局中，子元素的定位方式由其父元素的 display 属性决定