定义和用法

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实现 基础算法 水仙花数

    public class 水仙花数 { public static void main(String[] args) { for (int i = 100; i < 1000; i++) { i ...

  2. java实现生日相同概率

    假设所有年份都只有365天,求n个人中,出现生日相同的概率. 输入n 输出相同的概率(保留3位有效数字即可) import java.util.*; public class X { // n个人出现 ...

  3. PAT 旧键盘打字

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...

  4. Spring Security 实战干货：如何实现不同的接口不同的安全策略

    1. 前言 欢迎阅读 Spring Security 实战干货 系列文章 .最近有开发小伙伴提了一个有趣的问题.他正在做一个项目,涉及两种风格,一种是给小程序出接口,安全上使用无状态的JWT Toke ...

  5. Flutter 中由 BuildContext 引发的血案

    今天和各位分享一个博主在实际开发中遇到的问题,以及解决方法.废话不多说,我们先来看需求: 我们要做一个iOS风格的底部菜单弹出组件,具体涉及showCupertinoModalPopup()方法,该方 ...

  6. 对于Python的GIL锁理解

    GIL是什么 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可 ...

  7. Excel数据透视表的日常应用技巧

    对工作表中数据进行统计是经常需要的.一般情况我们都是使用菜单命令或函数来进行数据的统计的.可是如果要统计的工作表中记录很多,而且需要统计的项目也很多时,使用这种方法就显得力不从心了.请问还有什么更好的 ...

  8. Python基础002---基础知识

    一.标识符 标识符是自己定义的,是开发人员在程序中自己定义的一些符号和名称,如变量名.函数名等.在 Python 里,标识符由字母(区分大小写).数字.下划线组成,且数字不能开头.常用的命名方法有小驼 ...

  9. 五个Taurus垃圾回收compactor优化方案，减少系统资源占用

    简介 TaurusDB是一种基于MySQL的计算与存储分离架构的云原生数据库,一个集群中包含多个存储几点,每个存储节点包含多块磁盘,每块磁盘对应一个或者多个slicestore的内存逻辑结构来管理. ...

  10. matplotlib.pyplot.plot详解

    参考资料: https://blog.csdn.net/baidu_41902768/article/details/80686608 之前的随笔也有说过,matplotlib是python中一个非常 ...