您现在的位置:首页 >> 前端 >> 内容

z-index的使用代码实例

时间:2017/10/19 8:35:00 点击:

  核心提示:z-indexz-index一定要和除了static之外的定位一起使用,否则将会没有用,如果父元素设置过z-index那么子元素与父元素的z-index是一样的!!!!DOCTYPE htmlhtml...

z-index

z-index一定要和除了static之外的定位一起使用,否则将会没有用,如果父元素设置过z-index那么子元素与父元素的z-index是一样的!!!

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style type="text/css">  
  
        *{  
            padding:0;  
            margin:0;  
        }  
  
        ul li{  
            list-style: none;  
        }  
        .one{  
            width: 500px;  
            height:90px;  
            margin:50px auto;  
  
        }  
  
        .one li{  
            width:80px;  
            height:80px;  
            float:left;  
            border:3px solid green;  
            margin-left: -3px;  
        }  
  
        .one li:hover{  
            border-color: purple;  
            position: relative;  
            z-index: 2;  
        }  
        </style>  
    </head>  
    <body>  
  
        <ul class="one">  
            <li>1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
            <li>5</li>  
        </ul>  
    </body>  
</html>  

 

Tags:ZI IN ND DE 
作者:网络 来源:lele的博客