1）背景介绍：

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

（2）知识剖析：

          position常用的一般有五属性值

1.STATIC：默认值，无定位

元素显示在正常的标准流中，并且忽略TRLB以及z-index属性的设置 相当于没有设置position属性

2.ABSOLUTE:生成绝对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序 相对于 static 定位以外的第一个父元素进行定位,脱离了正常的标准流,并且不占用标准流空间

3.RELATIVE：生成相对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序 虽然该元素的位置发生了移动，但相对定位元素仍然处于正常的标准流中,所占据的空间是未生成定位元素之前它所占据的空间，而不是移动之后所占据的空间 使用TRLB对元素进行定位时,不能破坏也无法破坏正常的标准流 相对于原来正常时的位置进行定位

4.FIXED:也是生成绝对定位元素

可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序 相对于浏览器窗口进行定位,脱离了正常的标准流,并且不占用标准流空间 当页面滚动时，元素固定不动

5.INHERIT:继承

从父标签继承position属性值

（3）常见问题：

         能不能一个元素相对于其它元素进行定位呢?、

（4）解决方案：

1、参照定位的元素必须是相对定位元素的前辈元素，

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

（5）编码实战：

body{

margin: 0;

padding: 0;

}

.top-position{

position: fixed;

top: 0;

height: 30px;

width: 500px;

text-align: center;

background-color: blueviolet;

}

.div-wh{

height: 30px;

width: 500px;

margin: 30px 0;

text-align: center;

background-color:red;

}

/* 相对定位 */

.position-wrap{

position: relative;

padding: 50px 0 ;

height: 50px;

width: 500px;

text-align: center;

background-color:rebeccapurple;

}

.div-wh1{

position: absolute;

top: 20px;

height: 30px;

width: 500px;

text-align: center;

background-color:red;

float: left;

}

.float{

float: right;

width: 50px;

height: 50px;

margin: 0 10px 10px 10px;

border:1px solid cadetblue;

}

.float1{

float: left;

width: 50px;

height: 50px;

margin: 0 10px 10px 10px;

border:1px solid cadetblue;

}

<div class="top-position">绝对定位</div>

<div  class="div-wh"> 1</div>

<div  class="div-wh">2</div>

<div  class="div-wh">3</div>

<div class="position-wrap">相对定位

<div  class="div-wh1">固定定位</div>

</div>

<div  class="div-wh">5</div>

<div class="position-wrap">

<div class="float">浮动</div>

<div class="float1">浮动1</div>

（6）拓展思考：

还有没有其他方式来移动元素呢？

（7）参考文献：

https://www.cnblogs.com/huwt/p/10436468.html

https://www.imooc.com/code/3585

（8）更多讨论：

Q1：position 和 float 同时设置会出现什么问题 ？

A1：那么FLOAT的属性就会没用了，优先用position的定位属性。

Q2：相对定位是脱离了文档流吗？                     

  A2：不脱离文档当你移动相对定位的时候，空出的空白处相对定位仍然占领这下面的元素不会自动填充空白处。

Q3：实际运用中尽量少用哪种定位呢，会影响布局？

  A3：少用绝对定位  Absolute 它会影响页面布局特别当你改动的时候 如果把本应该是父元素相对定位改了那么它就会直接按照HTML来进行定位