关于html中z-index的问题

Question

这是网页的一部分。我把网页分成了3个<div>,然后浅蓝色的是一个<div> 浅蓝色下面的也是一个<div>，但是中间的部分怎么才能遮挡住上面的浅蓝色？ 我用{position：absolute；然后用top：50px；}实现了效果，但是我并没有用的Z-index属性。但是我用{Z-index：-50px; position: absolute;}并没有实现效果。求大神指教两个做法的区别。以及我怎样才能用z-index才能实现上面的效果。

Answer 1

1. 首先你的浅蓝色<div>是存在标准文档流中的position的默认值是static,你可理解为z-index:0，

2. z-index:0你可以想象成地面，

3. position:absolute、relative、fixed这三个属性下内容，相当于放在地面上的东西，他们的z-index默认值是>0，

4. z-index是控制层面的属性，当时你设置Z-index：-50px; 相当于你把这块内容放在地底下了

5. 我讲的不是很好，你如何想了解详细的知识《网页基础布局》http://www.imooc.com/learn/95
   

Answer 2

Z-index：-50px;这个错了，没有单位值px的

Answer 3

首先，z-index 属性是定位一个定位元素沿 z 轴的位置，你现在想做的是平面移动（x-y轴），与三维（z轴）没关系哟。

其次，它的值只有auto（默认，和父元素一样），number（堆叠顺序），inherit（继承父元素）。你写个px是不对哒。