定位的深入研究

两个盒子都有定位，后面的盒子会把前面的盒子盖住

1.z-index层级

z-index: 层级大小;
z-index值越大，层级越大，越靠上面显示，可以设置负值
    没有定位，z-index没有意义
​

2.绝对定位的层级

1.父子关系
   需设置子盒子，z-index为负值，父盒子能覆盖子盒子
2.兄弟关系
   两个盒子都有定位，后面的盒子会把前面的盒子盖住
   z-index值越大，层级越大，越靠上面显示，可以设置负值  

3.绝对定位可以把行内标签改变为块元素

1.display:block;
2.position:absolute;
3.float:left;

4.定位控制元素垂直居中

1.屏幕垂直居中
  width:200px;height:200px;
  position:absolute;
  top:50%; left50%;
  margin-left:-100px;
  margin-top:-100px;
2.在父盒子里垂直居中
    设置父盒子为相对定位；
   width:200px;height:200px;
  position:absolute;
  top:50%; left50%;
  margin-left:-100px;
  margin-top:-100px;
   
  margin-top: margin-left:  不能设置负的百分比
​
方法二：
<div class="box">
<div>
    
    </div>
</div>
​
.box{
position:relative;
background:red;
width:800px;
height:800px;
}
.box div{
postion:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}

5.浮动与定位的区别

float:半脱离，文字环绕
absolute：全脱离，不会出现文字环绕效果
​