五种定位——粘性定位

五种定位：

position:static;  
position:relative;
position:absolute;
position:fixed;
position:sticky;

static:静态定位，常规定位。此时top，bottom，left,right和z-index属性无效。

relative：相对定位。不改变页面布局下调整元素位置。

absolute：绝对定位。将元素移出常规文本流（即不为元素预留空间），相对于最近的非static定位的祖先元素偏移，可以设置外边距且不会与其他边距合并。通常使用时注意子绝父相。

父元素{
    
  position:relative;
}
子元素{
    
  position:absolute;
  top:10px;
  left:50px;
}

fixed：视口定位。将元素移出常规文本流（即不为元素预留空间），使元素相对于屏幕视口的位置来指定元素位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky:粘性定位。元素根据常规文本流定位，相对他的最近滚动祖先（nearest scrolling ancestor）和最近块级祖先，包括table-related元素进行偏移，且偏移不会影响其他元素。且也会创建新的层叠上下文。

层叠上下文：可以用z-index控制上下的。原理是对HTML元素构建一个三维思想，由屏幕引申到眼睛的一条Z轴。