CSS定位

position属性是用来设置元素的定位的前提，元素定位准确来说是由top，bottom，left，right四个属性来设置，但是如果没有设置position属性，这四个属性将不起作用，这四个属性也会根据position属性的不同而变化自己的工作方式。

一.position: static;

静态属性，位置不受top，bottom，left，right四个属性的影响，位置就是在HTML文件中的位置。

二.position: fixed;

设置position: fixed;的元素位置是相对于视口定位的，即滚动页面，它的位置始终不变，位于同一位置。 top、right、bottom 和 left 属性用于定位元素始终存在于视口的位置。

 div {
     position: fixed;
     top: 0;
     right: 0;
     width: 200px;
     height: 100px;
     border: 5px solid red;
     background-color: aquamarine;
 }

三.position: relative;

相对定位，设置position: relative;的元素，将会相对于正常的位置进行定位，设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

 

div {
     position: relative;
     left: 30px;
     border: 3px solid red;
 }

四.position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。他的祖先一定要设置相对定位，否则绝对定位会以文档作为祖先。

注意：除设置static元素外，其位置中所有元素都被定位

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

​

五.position: sticky;

暂且称他为粘性定位，position: sticky;的元素根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

这是最开始的原始页面

 当向上滑动鼠标后，它会变成下面这个样子，就自动固定到了页面最上方

div.sticky {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     padding: 5px;
     background-color: #cae8ca;
     border: 2px solid #4CAF50;
 }

六.重叠元素

在对元素进行定位时，有时可能会出现与其他元素重叠的现象，这时可以设置z-index属性来设置元素堆栈顺序，来控制那个元素显示在前，z-index的值越大，显示在最上方

                                 

第一张图片，z-index为-1时显示在图片之上
img {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 0px;
     top: 0px;
     z-index: -1;
 }


第二张图片，z-index为111时显示在图片之下
img {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 0px;
     top: 0px;
     z-index: 111;
 }