HTML定位方式

position: relative;相对定位
相对定位不会脱离文档流，保持流式布局中的位置
position:absolute;绝对定位
1. 绝对定位会使标签脱离文档流，丢失在流式布局中的位置
2.设置坐标之前，标签会在原来的地方，和其他标签重叠
3.设置left,top坐标之后，默认网页左上角为原点定位
4.如果父标签设置了定位，那么就以父标签坐上角为原点定位
5.块标签脱离文档流之后，宽度不在是100%，而不是以内容为准
position: fixed;固定定位
1.固定定位使标签脱离文档流，丢失宽度，丢失位置
2.固定定位以浏览器显示窗口的某一个角为坐标原点定位
position: sticky;粘性定位
粘性定位不会脱离文档流
使标签在网页滚动时停止在离窗口顶部一定距离的位置
总结: 绝对定位和固定定位会使标签脱离文档流，而相对和粘性定位不会脱离文档流
标签定位之后，往往会发生重叠现象，不同的标签重叠就会有层次
问题，可以使用z-index这个样式来调节标签的层级，默认都是0
z-index只对定位标签起效，非定位标签无效

         <h1>相对定位</h1>
       <div id="relative">
           <span>441</span>
           <span>das</span>
           <span>vzz</span>
           <span>7787</span>
       </div id="absolute">
       <h1>绝对定位</h1>
       <span>地鼠</span>
       <span>上的</span>
       <span>猫</span>
       <span>熊</span>
       <div>454</div>
        #relative span:nth-child(3){
        position: relative;
        /* 新位置距离默认位置左侧间距 */
        left: 150px;
        /* 新位置距离默认位置上边的间距 */
        top: -50px;
        /* 如果要向上或向左移动，就设置负值即可 */
    }
      #absolute{
        width: 300px;
        height: 300px;
        border: solid 1px black;
        /* 这里设置定位的作用是把绝对定位的子标签限制在父标签中 */
        position: relative;
    }
    #absolute span:nth-child(3){
        position: absolute;
    }
    #absolute span:nth-child(1){
        position: absolute;
        /* right,top指网页或父标签右上角为定位*/
        right: 0;
         top:0;
    }
    #absolute div{
        border: 5px solid blue;
        position: absolute;
        /*绝对定位中，一般left和right一般不混用，top和bottom不混用
        但是，如果把标签的left,top,right,bottom都设置为0; */
        left: 0;right: 0;top: 0;bottom: 0; 
        /* 3. 设置外边距auto */
        margin: auto;
    }
    固定定位
    <h1 id="fixed">固定定位</h1>
   <h1 id="sticky">1粘性定位</h1>
   <h1>2</h1>
   <h1>3</h1>
   <h1>4</h1>
   <h1>5</h1>
   <h1>6</h1>
   <h1>7</h1>
   <h1>8</h1>
   <h1>9</h1>
   <h1>10</h1>
   <h1>11</h1>
   <h1>12</h1>
   <h1>13</h1>
   <h1>14</h1>
   <h1>15</h1>
   <h1>16</h1>
   <h1>17</h1>
   <h1>18</h1>
   <h1>19</h1>
   <h1>20</h1>
   <h1>21</h1>
   <h1>22</h1>
   <h1>23</h1>
   <h1>24</h1>
   <h1>25</h1>
   <h1>26</h1>
   <h1>27</h1>
   <h1>28</h1>
   <h1>29</h1>
   <h1>30</h1>
   <h1>31</h1>
   <h1>32</h1>
   <h1>33</h1>
   <h1>34</h1>
   <h1>35</h1>
   <h1>36</h1>
   <h1>37</h1>
   <h1>38</h1>
   <h1>39</h1>
   <h1>40</h1>
  #fixed{
        border: solid 1px blue;
        position: fixed;
        /*固定定位也可以用left ,right bottom top设置位置*/
    }
    #sticky{
        position: sticky;
        border: 1px solid blue;
        background-color: antiquewhite;
        /* 可以设置top值，表示停止距离 */
        top: 50px;
    }