使用position属性，会激活5个属性
- left
- right
- bottom
- top
- z-index（-1至999）
注：z-index：会改变内容的层级关系，
1、绝对定位
position: absolute
影响：
- 元素会脱离文档流==元素原本占据空间释放
- 原点计算：最近一个有定位的父元素作为原点参考，如果没有，跟页面（0,0）作为参考
- 绝对定位是内嵌元素时，也可以设置宽高。
实例：
1 .div1{ 2 width: 400px; 3 height: 400px; 4 background-color: greenyellow; 5 position: absolute; *绝对定位,在本身的位置浮动起来了*/ 6 left: 0px; * left，right设置宽高有效，必须在使用定位后设置后*/ 7 right: 0px; 9 }
2、相对定位
position: relative;
- 没有脱离文档流，原本元素在标准文档流之中占据的位置不会释放不会像-->
- 根据自身在文档流的位置作为原点计算
- 父相子绝
- 能保证文档流不受影响
- 能给子元素做一个参考点
.实例：
1 div1{ 2 position: relative; 3 width: 200px; 4 background-color: red; 5 height: 200px; 6 left: 70px 7 }
9 .div1_1{ 10 width: 100px; 11 height: 100px; 12 position: absolute; 13 /*position: relative;*/ 14 background-color: yellow; 15 left: 70px; 16 }
1 <div class="div1">、、、、、、、、、、、父 2 <div class="div1_1"></div>、、、、子 3 </div> 4 <div class="div2"></div>、、、、、、、父兄
注：子父元素相对定位时，子元素会浮在父元素上面。
3、固定定位
- 脱离文档流
- 原点根据浏览器窗口（0,0）根父元素没有任何关系，不会跟父元素走
- 能保证文档流不受影响
- 能给子元素绝对定位提供原点参考。
实例：
1 .div3{ 2 width: 300px; 3 height: 300px; 4 background-color: hotpink; 5 position: fixed; 6 right: 0px; 7 border: 0px; 8 }