CSS中的绝对定位(absolute)和z-index的用法

先把代码贴出来

   
     
     
      
      
      
 
 

  爷爷元素
    

    父元素
    

    儿元素1
    

    

    儿元素2
    

    

 

 

效果如下

解释：

css中有四种定位：默认，绝对（absolute），相对（relative），固定（fixed）

我们这里讨论的是绝对定位（absolute），绝对定位是一种脱离文档流的定位，被设置为绝对定位的元素，会找一个参照，先找父元素，查看父元素是否被设置为绝对或相对定位，有的话，视其为参照，如果没有，则继续往上找，直到html元素，以窗口作为参照，注意：被设为绝对定位的元素，可以不用管元素是否是块元素，可以直接设置宽高。

我们定义了四个div：

 

    爷爷元素
    

    父元素
        

        儿元素1
        

        

        儿元素2
        

    

 

 

一个最外层的爷爷元素（先这样叫0.0），设置为position:relative;一个父元素，设置为 position:absolute;，并给这个父元素两个子元素分别设置样式为：

position:absolute;  top:60px; left:20px; z-index:222;background:green;/*子元素1*/

position:absolute; top:30px; left:30px;z-index:33;background:yellow;/*子元素2*/

设置了绝对定位，一般都要再指定top，bottom，left，rigth这几个值其中的一些，

上面的父元素设置了absolute，但是没有指定top，bottom，left，rigth，其中的一些，所以它默认是left:0,top:0;

上面的子元素1设定了top:60px; left:20px;所以它的位置相对于父元素向上有60px，向左有20px;

上面的子元素2设定了top:30px; left:30px;所以它的位置相对于父元素向上有30px，向左有30px;

所以最终效果是这样：

但是为什么子元素2会被子元素1盖住呢？

position:absolute;  top:60px; left:20px; z-index:222;background:green;/*子元素1*/

position:absolute; top:30px; left:30px;z-index:33;background:yellow;/*子元素2*/

z-index这个属性，只适用于被设置为absolute样式的元素，值越大，越在上面。子元素1的z-index为222，子元素2的为33，所以子元素1在上面。

第一次在CSDN写博客，以上知识均是本人从书本和互联网上查阅资料，加上自己的整理所得。本人不是专业的开发人员或者web设计师，只是前端技术和PHP技术爱好者。以上所述知识，如有错误，还望指正。谢谢！