css属性：position定位详解

positon 定位类型
static：静态，无定位（默认）
relative：相对定位
absolute：绝对定位
fixed： 固定定位
sticky：粘性定位
定位位置依靠top,right,bottom,left来进行偏移

相对定位：

• 元素开启相对定位时，如果不设置偏移量，元素不会发生变化。
• 相对于元素在文档流中的位置进行偏移。（即：相对于原本的位置偏移）
• 相对定位会提升元素的层级
• 相对定位不会使元素脱离文档流，不会改变元素性质

	<div style="border:3px solid red;width:100px;height:100px">1</div>
    <div style="border:3px solid blue;width:100px;height:100px;position: relative;top:30px;left:30px">2</div>
    <div style="border:3px solid red;width:100px;height:100px">3</div>

效果图：
第二个块元素位置发生偏移

绝对定位

• 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。

• 元素会从文档流中脱离

• 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

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

• 绝对定位元素是相对于其开启了static定位以外的祖先元素进行定位的
  绝对定位的原点，就是离他最近的一个开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则相对于根元素进行定位。即：html(根元素、初始包含块)

  子绝父相
  一般是给需要开启绝对定位元素的祖先元素开启一个相对定位，这样可以保证祖先元素不脱离文档流，将绝对定位元素限制在开启相对定位的祖先元素中，可以较好的进行布局

	<span>蓝色的div位于正常文档流中，红色的div脱离了文档</span>
    <div style="width: 100px;height: 100px;border:5px solid blue;"></div>
    <div style="width: 100px;height: 100px;border:3px solid red;position: absolute;top:50px;left:100px"></div>
    
    <span>这里会被红色div覆盖</span>

效果图：
偏移前

偏移后

	<span>绿色div和粉色div都设置成绝对定位div，但粉色div它的父元素是绿色div，所以粉色div计算相对位置是根据绿色div的原点计算的</span>
    <div style="width: 200px;height: 200px;border:3px solid green;position: absolute;top:100px;left:100px;">
        <div style="width: 100px;height: 100px;border:3px solid pink;position:absolute;top:30px;left: 30px"></div>
    </div>

效果图：
偏移前

偏移后

固定定位

• 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
• 唯一不同的是固定定位永远参照于浏览器的视口进行定位
• 固定定位的元素不会随网页的滚动而滚动

	//滑动滚动条时，box2永远与浏览器视口保持一个距离
	<div class="box1" style="width: 300px;height: 900px;border:blue 2px solid">1</div>
    <div class="box2" style="width: 60px;height: 150px;border: green 2px solid;position: fixed;top: 30px;left: 50px;">2</div>

粘性定位

• 与相对定位的特点基本一致。
• 以浏览器的可视窗口为参照点移动元素
• 当元素滚动到某一距离时，不再滚动，保持固定。

	//当box2移动到某一位置时，不再滚动，保持固定
	<div class="box1" style="height: 1000px;">
        <div class="box2"
            style="width: 300px;height: 50px;line-height: 50px;background-color: gray;text-align: center;margin-top: 50px;position: sticky;top:10px;">
            <span>hello</span>
            <span>hello</span>
            <span>hello</span>
            <span>hello</span>
        </div>
    </div>

层级
z-index 设置目标对象的定位层序。数值可以是正整数、负整数或0，默认是auto，数值越大，所在的层级越高，覆盖在其他层级之上。只有定位的盒子才有z-index属性。

	<div style="background-color: yellowgreen;width: 100px;height: 100px;position: relative;z-index: 4"></div>
    <div style="background-color: yellow;width: 100px;height: 100px;position: absolute;top:50px;left: 50px;z-index: 2"></div>
    <div style="background-color:red;width: 100px;height: 100px;position: absolute;top:100px;left: 100px;z-index: 1"></div>
    <div style="background-color: green;width: 100px;height: 100px;position: relative;top:50px;left: 150px;"></div>

效果图：

绝对定位的盒子居中

<style>
	.box1{
            width: 300px;
            height: 300px;
            background-color: #bfa;
            position: relative;
        }
	.box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            /* 水平方向居中。必须设置left和right为0 */
            left: 0;right: 0;
            margin-left: auto;
            margin-right: auto;

            /* 垂直方向居中。必须设置top和bottom为0（在正常的文档流中无法实现）*/
            top:0;bottom: 0;
            margin-top: auto;
            margin-bottom: auto;
        }
    </style>

 <div class="box1">
        <div class="box2"></div>
    </div>

效果图：
box2在box1中水平垂直居中