定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

优先关系

如果同时出现两个相同的z-index值，那么在后面的元素层级会高于前面的元素。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
</head>
<style type="text/css">
    .first{width:200px; height: 500px; position: absolute; background:#00f; z-index: 100;}
    .second{width:250px; height: 250px; position: absolute; background:#f33; z-index: 100;}
</style>
<body>
    <div class="first">first</div>
    <div class="second">second</div>
</body>
</html>

类名为second的div会在类名为first的div上面。

z-index属性是区分所有兄弟元素的高度，并不是所有页面元素的高度；例如：

<style type="text/css">
    .first{width:200px; height: 500px; position: absolute; top: 0; background:#00f; z-index: 80;}
    .second{width:250px; height: 250px; position: absolute; top: 50px; background:#f33; z-index: 100;}
    .first-child{width:250px; height: 250px; position: absolute; top: 0; background:#333; z-index: 101;}
</style>
<body>
    <div class="first">first
        <div class="first-child">first-child
        </div>
    </div>
    <div class="second">second</div>
</body>

类名为first-child的div元素的z-index大于类名为second的div元素的z-index；但页面显示效果first-child位于second下面

css z-index的层级关系的更多相关文章

  1. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  2. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  3. Unity NGUI和UGUI与模型、特效的层级关系

    目录 1.介绍两大UI插件NGUI和UGUI 2.unity渲染顺序控制方式 3.NGUI的控制 4.UGUI的控制 5.模型深度的控制 6.粒子特效深度控制 7.NGUI与模型和粒子特效穿插层级管理 ...

  4. HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  5. NGUI 层级关系控制

    NGUI元素的遮挡情况是不依赖空间关系,所以在NGUI上添加特效有时候特别蛋疼,特别是美术同学还要依赖空间关系来控制特效效果,那先看看看NGUI的层级是怎么处理的,不过下面的描述都是针对单个相机下的P ...

  6. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  7. 【吐血分享】SQL Server With As 递归获取层级关系数据

    纯洁的一周又开始了,今天看到一则新闻,笑尿了,和袁友们一起娱乐下 最近两月在做基于Saas模式的人力资源管理产品,平常数据库设计我经常会遇到如下需求场景: 以前商城类网站在设计类型表的时候,设计成单表 ...

  8. CTE计算层级关系

    推广渠道表有ParentID字段,代表上下层级关系.现要统计每个推广员,推广了多少人? --创建表结构,插入测试数据 USE DBA_Monitor GO CREATE TABLE [dbo].[TG ...

  9. MFC窗口的父子关系和层级关系

    一直对窗口之间的关系有些混乱,遇到需要指定父窗口的函数时常常要考虑很久,究竟父窗口是哪个窗口,遂上网查资料,略有所悟,简记如下: 对话框中的所有控件(比如Button等)都是其子窗口.        ...

  10. HTML，CSS，JS之间的关系

    HTML,CSS,JS之间的关系 本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化.后面会附上各种链接地址,尊重原创 最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML). ...

随机推荐

  1. java实现找素数

    ** 找素数** 素数就是不能再进行等分的整数.比如:7,11.而9不是素数,因为它可以平分为3等份.一般认为最小的素数是2,接着是3,5,- 请问,第100002(十万零二)个素数是多少? 请注意: ...

  2. 教科书级讲解，秒懂最详细Java的注解

    所有知识体系文章,GitHub已收录,欢迎Star!再次感谢,愿你早日进入大厂! GitHub地址: https://github.com/Ziphtracks/JavaLearningmanual ...

  3. 【Spring注解驱动开发】自定义TypeFilter指定@ComponentScan注解的过滤规则

    写在前面 Spring的强大之处不仅仅是提供了IOC容器,能够通过过滤规则指定排除和只包含哪些组件,它还能够通过自定义TypeFilter来指定过滤规则.如果Spring内置的过滤规则不能够满足我们的 ...

  4. Vue好书推荐

    1.Vue.js实战 从基础知识到ui组件封装和剖析,层层推进,最后两个案例实战.适合零基础入门,学完可就业.(推荐看这本) 交流地址(pdf原件):链接(点击跳转):提取码:7IsG 2.vue.j ...

  5. vue axios封装

    前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...

  6. vscode 修改标签栏样式为换行全部展示

    目前vscode的标签栏是滚动式的,选择查看都不是很方便,于是想要搞成andriod studio那种换行全部展示的标签栏. 因为vscode是electron写的,因此修改css就可以实现. 修改方 ...

  7. Java线程池简聊

    在Java中,已经实现了4中内置的线程池,这四种我不多聊. 大家各种网站论坛都能查得到. 现在说一下这四种线程池的基类: ThreadPoolExecutor在ThreadPoolExecutor中你 ...

  8. IDEA环境Spring Boot 2.3整合Activiti 6.0，启动项目初始化表并创建核心服务

    如下步骤照着抄就完事了. 一.新建一个spring boot项目,并引入相关依赖 <?xml version="1.0" encoding="UTF-8" ...

  9. Linux系统管理——Linux安装

    实验软件包下载地址 VirtualBox下载地址 VirtualBox:下载地址 CentOS7镜像下载地址 CentOS7:下载地址 远程登录管理工具下载地址 MobaXterm:下载地址 Virt ...

  10. 一个简单的CSS登录页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...