定义和用法

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. Linux文本编辑vi基本操作

    vi是Linux/Unix最常用的全屏幕文本编辑器,他的作用是显示.编辑.建立文本文件.它没有菜单,只有命令. vi工作模式图: 编辑模式进入插入模式命令:A:在光标所在行尾插入 a:在光标所在字符后 ...

  2. PAT 说反话

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小 ...

  3. 我的Dos笔记

    DOS笔记:DOS是英文Disk Operating System的缩写,意思是“磁盘操作系统”[drive:][path][filename] 指定要列出的驱动器.目录和/或文件.    /A   ...

  4. Andorid中写文件后在电脑上看不到的解决办法

    每次通过输出流往SD卡写入文件,连接上电脑,用MTP的方式模拟一个移动磁盘,打开磁盘却没有这样一个文件,而通过adb的方式查看就有,造成这个现象的原因是,每次写入之后,MTP的数据库并没有更新,因为更 ...

  5. [原创][开源] SunnyUI.Net 系列文章目录

    SunnyUI.Net, 基于 C# .Net WinForm 开源控件库.工具类库.扩展类库.多页面开发框架 Blog: https://www.cnblogs.com/yhuse Gitee: h ...

  6. CSS3如何实现div闪烁效果

    效果: Html: <h1 class="blink">花花世界</h1> Css: @keyframes fade { from { opacity: 1 ...

  7. cc38b_demo_C++_异常_(2)txwtech在异常中使用虚函数-多态

    //cc38b_demo,21days_C++_异常_(2)txwtech20200121在异常中使用虚函数-多态 //--异常层次结构//*异常的类-创建自己的异常类//*异常派生-就是继承//*异 ...

  8. mybatis-config.xml核心文件配置

    一.全局配置文件结构 configuration 配置 properties 属性:可以加载properties配置文件的信息 settings 设置:可以设置mybatis的全局属性 typeAli ...

  9. Beta冲刺<3/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第三天(05.21) 作业正文 如下 其他参考文献 ... B ...

  10. django 网站域名解析 IP绑定 新建站 新域名

    备案成功后,我们要用域名来访问服务器,这个不仅要修改nginx的配置文件,还要设置域名的解析,下面是我的一个调试经验过程:直接上图了. 1.问题查找