CSS小结6

css小结6

1 子元素相对父元素定位：
    父元素 {position:relative;}
     子元素
      {
           position:absolute;
           /定义top,bottom,left和right/

      }

   <style type="text/css">
        .father
        {
            position:relative;
            width:160px;
            height:30px;
            background-color:#00FFFF;
        }
        .son
        {
            position:absolute;
            bottom:-30px;
            right:65px;
            width:30px;
            height:30px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
   注意position:absoulte会把元素转换为块元素

2 子元素相对祖先定位，道理是一样的：
    <style type="text/css">
        .grandfather
        {
            position:relative;   /*设置相对定位*/
            width:200px;
            height:160px;
            background-color:blue;
        }
        .father
        {
            position:relative;   /*设置相对定位*/
            width:120px;
            height:30px;
            background-color:#00FFFF;
        }
        .son
        {
            position:absolute; /*设置绝对定位*/
            bottom:-20px;
            right:50px;
            width:20px;
            height:20px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

     如果删除了父亲元素的 position:relative，则SON是相对于GRANDFATHER定位；
3 Z-INDEX:
    指明元素的堆叠顺序：
    只有在定义position:relative，fixed,absoulte下起作用，Z-INDEX值为正数的元素在Z-INDEX=0的上面，负数的在下面；
      div
        {
            width:100px;
            height:100px;
            font-size:50px;
            position:absolute;
        }
        #A{background-color:red;top:10px;left:10px;}
        #B{background-color:orange;top:40px;left:40px;}
        #C{background-color:blue;top:70px;left:70px;}
    </style>
</head>
<body>
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="C">C</div>
：
这个时候A元素最底，B元素上面，C元素最上面；如果A的Z-INDEX：3，Z-INDEX;2,zindex-:1,则A,B,C元素反过来，A在最上面；

猜你喜欢