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

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

2、ab衡痕贤伎solute：绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响； #redBox { width: 200px; 艘早祓胂 height: 200px; background: red; position: absolute;/*绝对定位*/ }我可以看到如图，灰色的盒子距离其父类元素（绿色大盒子）的top为50px；而不是距离红色盒子的底部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; }