CSS元素堆叠

通常我们可能会认为 HTML

网页是个二维的平面,因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的,每个元素之间都有一定的间隙,不会重叠。然而,实际的网页其实是三维的,元素之间可能会发生堆叠(重叠),您可以通过

CSS 中的 z-index 属性来设置元素的堆叠顺序,如下图所示:

图:元素堆叠演示

每个元素都有一个默认的 z-index 属性,将 z-index 属性与 position 属性相结合可以创建出类似 PhotoShop

中的图层效果。z-index

属性可以设置元素的层叠级别(当元素出现重叠时,该元素在其它元素之上还是之下),拥有更高层叠级别的元素会处于层叠级别较低的元素的前面(或者说上面)。

通过 z-index 属性您可以创建更加复杂的网页布局,z-index 属性的可选值如下表所示:

描述
auto 默认值,堆叠顺序与父元素相等
number 使用具体数值(整数)设置元素的堆叠顺序
inherit 从父元素继承 z-index 属性的值

关于元素的层级关系有以下几点需要注意:

  • 对于未设置 position 属性的元素或者 position 属性的值为 static 时,后定义的元素会覆盖前面的元素;
  • 对于设置有 position 属性且属性值不为 static 的元素,这些元素会覆盖没有设置 position 属性或者 position 属性值为 static 的元素;
  • 对于 position 属性值不为 static 且定义了 z-index 属性的元素,z-index 属性值大的元素会覆盖 z-index 属性值小的元素,即 z-index 属性值越大优先级越高,若 z-index 属性值相同,则后定义的元素会覆盖前面定义的元素;
  • z-index 属性仅在元素定义了 position 属性且属性值不为 static 时才有效。

【示例】下面通过具体代码来演示 z-index 属性的使用:

复制代码
<!DOCTYPE html>

<html>

<head>

    <style>

        .box-x {

            width: 150px;

            height: 350px;

            border: 1px dashed red;

            background-color: rgba(255, 153, 153, 0.7);

            float: left;

        }

        .box-y {

            width: 300px;

            height: 120px;

            border: 1px dashed green;

            background-color: rgba(179, 255, 153, 0.7);

        }

        .one {

            position: absolute;

            top: 5px;

            left: 5px;

            z-index: 4;

        }

        .two {

            position: relative;

            top: 30px;

            left: 80px;

            z-index: 3;

        }

        .three {

            position: relative;

            top: -10px;

            left: 120px;

            z-index: 2;

        }

        .four {

            position: absolute;

            top: 5px;

            right: 5px;

            z-index: 1;

        }

        .five {

            margin-left: 100px;

            margin-top: -50px;

            background-color: rgba(255, 255, 153, 0.7);

            z-index: 5;

        }

    </style>

</head>

<body>

    <div class="box-x one">one</div>

    <div class="box-y two">two</div>

    <div class="box-y three">three</div>

    <div class="box-x four">four</div>

    <div class="box-y five">five</div>

</body>

</html>

运行结果如下图所示:

图:z-index 属性演示

原文地址CSS元素堆叠

相关推荐
隐林2 小时前
如何使用 Tiny-editor 快速部署一个协同编辑器
前端
Mintopia2 小时前
🧠 对抗性训练如何增强 WebAI 模型的鲁棒性?
前端·javascript·人工智能
恋猫de小郭2 小时前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
北城笑笑2 小时前
Git 10 ,使用 SSH 提升 Git 操作速度实践指南( Git 拉取推送响应慢 )
前端·git·ssh
FreeBuf_2 小时前
攻击者利用Discord Webhook通过npm、PyPI和Ruby软件包构建隐蔽C2通道
前端·npm·ruby
科技百宝箱2 小时前
02-如何使用Chrome工具排查内存泄露问题
前端·chrome
鹏多多3 小时前
React无限滚动插件react-infinite-scroll-component的配置+优化+避坑指南
前端·javascript·react.js
不会算法的小灰3 小时前
HTML盒子模型详解
前端·html
lifejump3 小时前
文章管理系统CMS的XSS注入渗透测试(白盒)
前端·web安全·xss·安全性测试
华仔啊3 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js