定位布局Position

  position:  

static  静态（默认、非定位元素）
relative  相对（定位元素）
absolute  绝对（定位元素）
fixed     固定（定位元素）
sticky    粘滞（定位元素）
定位元素的特点: 可以使用定位规则 " top right bottom left "

1.position: static;

HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

2.position: relative;

不脱离文档流，
相对于它原来所在位置移动。

3.position: absolute;

脱离文档流，
相对于距离它最近的父定位元素位置移动。如果所有的父元素都不是定位元素，相对于浏览器视口位置移动。
        一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

4.position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

5.position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。