定位叠放次序 z-index

最新推荐文章于 2024-06-13 21:20:19 发布

青柠杆菌

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量272

点赞数

分类专栏： HTML和CSS（基于黑马程序员视频学习文章标签： css css3 html

本文链接：https://blog.csdn.net/jjlome/article/details/121691827

版权

HTML和CSS（基于黑马程序员视频学习专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--定位叠放次序 z-index-->
    <!--在使用定位布局时，可能出现盒子重叠的情况，此时，可以使用z-index 来控制盒子的前后次序（z轴）-->
    <!--语法：-->
    <!--选择器{z-index： 1；}-->
    <!--数值可以是正整数、负整数或者零，默认时auto，数值越大，盒子约考上-->
    <!--如果属性值相同，则按照书写顺序，后来局上-->
    <!--数字后面不能加单位-->
    <!--只有定位的盒子才有z-index属性-->
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiangda {
            background-color: red;
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
        }
        .qiangge {
            background-color: blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box xiangda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
</body>
</html>

青柠杆菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位叠放次序 z-index

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title>  <!--在使用定位布局时，可能出现盒子重叠的情况，此时，可以使用z-index 来控制盒子的前后次序（z轴）
复制链接

扫一扫