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 属性决定
标签：定位,方式,元素,relative,相对,static,position,css From： https://blog.51cto.com/u_16340211/8925182