z-index

最新推荐文章于 2023-04-19 11:15:20 发布

love-study-lele

最新推荐文章于 2023-04-19 11:15:20 发布

阅读量555

点赞数 1

分类专栏： css 文章标签： z-index

本文链接：https://blog.csdn.net/qq_40639990/article/details/78265307

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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>

love-study-lele

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
z-index

z-indexz-index一定要和除了static之外的定位一起使用，否则将会没有用，如果父元素设置过z-index那么子元素与父元素的z-index是一样的！！！ *{ padding:0; margin:0; } ul li{
复制链接

扫一扫

专栏目录