定义和用法

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. 二叉树路径搜索---DFS 路径和

    vector<vector<int>> pathSum(TreeNode* root,int sum){//DFS遍历获取适合路径,当递归到叶子结点且sum为0,表示该路径合适 ...

  2. pytorch入门2.2构建回归模型初体验（开始训练）

    pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...

  3. 这才是Android设置界面的正确做法👌👌👌

    话不多说,先上效果图 本文参考简书博客:<这才是Android设置界面的正确做法>一文写成,在其基础上删改并增加了一些内容.建议新窗口打开原文,在本文讲述不清楚的地方参考原文去寻找答案. ...

  4. 关于cronExpression表达式

    spring 定时任务设置,关于cronExpression表达式: 字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 0-59 , - * / 小时 0-23 , - * / 日期 1 ...

  5. 总结:PgSql备份pg_dump与还原pg_restore

    备份还原方法:pg_dump和pg_restore,先仔细说明这两个命令,再记录我的操作方法. 远程复制scp: #which scp  /usr/bin/scp #rpm -qf /usr/bin/ ...

  6. 伪造随机的User-Agent

    写好爬虫的原则只有一条: 就是让你的抓取行为和用户访问网站的真实行为尽量一致 1.伪造UA字符串,每次请求都使用随机生成的UA 为了减少复杂度,随机生成UA的功能通过第三方模块库fake-userag ...

  7. Android学习笔记主题（Theme）资源文件

    安卓的主题资源文件,可以用于对Android应用的美化. styles文件是主题资源文件. 定义一个主题资源格式如下: <resources> <!-- Base applicati ...

  8. 果然学习好是有道理的，学习Mysql与正则表达式笔记

    正则表达式是用来匹配文本的特殊的字符集合,将一个正则表达式与文本串进行比较,Mysql中用where子句提供支持,正则表达式关键字:regexp1.使用‘|’匹配两个串中的一个 2.使用‘[]’匹配几 ...

  9. 【Python】使用Selenium实现淘宝抢单

    最近,小明为了达成小姐姐的愿望,在某宝买到心仪的宝贝,再加上又迷上了python,就通过python轻而易举地实现了(个人声明:对Java来说,这并不是背叛). 需求分析&前期准备 需求其实很 ...

  10. 线程间配合：Condition、Semaphore、CountDownLatch、CyclicBarrier

    1 重入锁的好搭档:Condition条件 如果大家理解了Object.wait()和Object.notify()方法的话,那么就能很容易理解Condition接口了.它和wait()和notify ...