定位:
  定位指的就是将指定的元素摆放到页面的任意位置
  通过定位可以任意的摆放元素
  通过position属性来设置元素的定位
  可选值:
      static:默认值,元素没有开启定位
      relative:开启元素的相对定位
      absolute:开启元素的绝对定位
      fixed:开启元素的固定定位(也是绝对定位的一种)
      当元素的position属性设置为relative时,则开启了元素的相对定位
     1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
     2.相对定位是相对于元素在文档流中原来的位置进行定位
     3.相对定位的元素不会脱离文档流
     4.相对定位会使元素提升一个层级
     5.相对定位不会改变元素的性质,块还是块,内联还是内联

position: relative;
<body>
         
         <div class="box1"></div>
         <div class="box2"></div>
         <div class="box3"></div>
         
         <span class="s1">我是一个span</span>
         
     </body>

如下图:

html5绝对定位的标准 html中绝对定位与相对定位_文档流

绝对定位

当position属性值设置为absolute时,则开启了元素的绝对定位

绝对定位:

1.开启绝对定位,会使元素脱离文档流

2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位) 如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位。

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质,
                 *         内联元素变成块元素,
                 *         块元素的宽度和高度默认都被内容撑开

固定定位
                 * 当元素的position属性设置fixed时,则开启了元素的固定定位
                 *     固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样
                 * 不同的是:
                 *         固定定位永远都会相对于浏览器窗口进行定位
                 *         固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动
                 * 
                 *         IE6不支持固定定位
                        position: fixed;