1. H5 H5 CSS布局样式定位position
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。
position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。
1.1. position:relative
生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。relative分为三种情况进行说明
（1）包含关系：父级absolute，子级relative；
（2）包含关系：父级relative，子级absolute；
（3）并列关系：兄弟标签都是relative；
1.1.1. 最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对浏览器的定位。
css：
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
left:50px;
top:50px;
}
#b{
height:50px;
width:50px;
position: absolute;
background-color:green;
left:20px;
top:20px;
}
html：
<div id = "a">a
<div id = "b">b
</div>
</div>
1.1.2. 正常情况下同1的效果，不过需要注意的是，当标签中包含文字时，relative会发生调整。
1.1.3. 当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的。
css：
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
}
#b{
height:200px;
width:200px;
position:relative;
background-color:green;
left:50px;
top:50px;
}
html：
<div id = "a">
</div>
<div id = "b">
</div>
但当a标签也设置了left、top等相关属性时，兄弟标签b继续以a变化前作为参考相对位置。
css：
#a{
height:200px;
width:200px;
position: relative;
background-color:red;
left:50px;
top:50px;
}
#b{
height:200px;
width:200px;
position:relative;
background-color:green;
left:20px;
top:20px;
}
html：
<div id = "a">
</div>
<div id = "b">
</div>
1.2. position:absolute
absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父…)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。
<div class="relative-layout">
<span class="relative-item">relative布局</span>
</div>
/*relative布局*/
.relative-layout {
background-color: grey;
position: relative;
padding: 20px;
}
.relative-item {
position: absolute;
right: 0.02rem;
top: 0.11rem;
background: red;
color: #2ac845;
}
可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；
1.3. position:fixed
fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。
z-index属性：
使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。
<div class="fixed-layout">
<div class="fixed-inner"></div>
</div>
<div class="fixed-layout2">
<div class="fixed-inner2"></div>
</div>
/*fixed布局*/
.fixed-layout {
height: 150px;
width: 150px;
background-color: grey;
position: absolute;
z-index: 1;
}
.fixed-inner {
height: 50%;
width: 50%;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.fixed-layout2{
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
background: green;
}
.fixed-inner2{
position: absolute;
left: 50%;
top: 50%;
z-index: 8;
height: 50%;
width: 50%;
background: yellow;
}
当两个拥有子元素的父级元素（绿色和灰色DIV）重叠时，层级高的父元素（绿色DIV）里的子元素（黄色DIV）永远在上层，即使层级底的父元素（灰色DIV）里的子元素（红色DIV）z-index的值较大。
