position相关问题的思考

1、固定定位：fixed—-是否脱离文档流，层级是否改变。
html部分

<div class="part_fixed">固定的粉色块</div>
<div class="reference">参照的绿色块</div>

css部分

<style type="text/css">
body{margin:0;font-family:"微软雅黑";}
div{
    width:100%;
    height:50px;
}
.part_fixed{
    background:pink; 
    position:fixed;
    top:0;
    left:0;
}
.reference{
    background:green;
}
</style>

效果：窗口顶部只显示固定定位的粉色块。
原因：设置了固定定位的粉色块脱离文档流，之前所在的位置消失，绿色块向上移动，而粉色块覆盖在绿色块上。

question：如果改变粉色块的z-index，是否会让绿色块显示？
answer : 固定粉的z-index设置的数值小于0，都能让绿色块显示。表明脱离文档流后的固定块层级比普通文档流的层级高。注意：z-index只能给拥有定位属性的元素设置，比如给例子里的绿色块设置，是没有什么作用的。

结论：固定定位会使元素脱离文档流，而层级（z-index）高于普通文档流。

2、相对定位与固定定位的层级显示

html部分

<div class="part_fixed">固定的粉色块</div>
<div class="part_relative">相对定位的蓝色块</div>
<div class="reference">我是参照的标杆</div>

CSS部分

div{
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
}
.part_fixed{
    background:pink;
    position:fixed;
    top:0;
    left:0;
}
.part_relative{
    background:blue;
    position:relative;
    top:10px;
}
.reference{
    background:yellow;
}

效果：蓝色的相对块覆盖在粉色块上面，粉色块出现10px的高度，蓝色块全部显示，而没有定位属性的黄色块出现在蓝色块下面，显示高度为40px。
原因：固定粉和相对蓝都拥有定位(position)的元素，其z-index属性被激活，如果有叠层，那么将会是写在后面的元素叠在前面的元素上。固定粉因脱离文档流，之前的空间消失，由相对蓝取代，（相对定位不会使元素脱离文档流），并层叠在粉块上。蓝色块相对其原来的位置向下移动10px，其原来位置的空间保留。所以黄色块的上面还是有一个透明的50px的空间。蓝色块由于有定位属性，所以层级比普通文档（黄块）,会档住黄色块的10px，所以黄块只显示了40px。

结论：
【1】定位元素，如未设置z-index值，那么后写的元素层级大于先写的。
【2】相对定位：原空间保留，其之后的普通文档流都是以它原空间位置来排序。并且，相对定位的元素层级高于普通文档流的，会盖住其后紧跟的普通文档流。