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】相对定位：原空间保留，其之后的普通文档流都是以它原空间位置来排序。并且，相对定位的元素层级高于普通文档流的，会盖住其后紧跟的普通文档流。