html中absolute、realative、z-index的简单分析

1、realtive：而相对定位是相对于同级元素的定位，也就是上一个同级元素#redBox {width: 200px;height: 200px;background: red;position: realatIve;/*相对定位*/}我们看到灰色盒子相对于红色盒子同级元素top 50px，而不是绿色大盒子的顶部top 50px，更不是网页的top 50px

3、z-index就是网页的z轴，用相对定位绝对定位把两个殿秩痊肭层重叠在一起，z-index的值越大，就越靠上接下来我们来考虑一个问题：怎么吧步骤2中的红色盒子显现在上面二使灰色盒子在底部显现。（这个时候我们就可以使用z-index属性来对他们进行设置） #redBox { width: 200px; height: 200px; background: red; position: absolute; z-index: 2; /*红色盒子要在上面，所以设置为2（因为2>1）*/ } #grayBox { top: 100px; width: 300px; height: 100px; background: gray; position: absolute; top: 50px; z-index: 1; }