要想z-index可以使用，就要配合定位元素使用即position

如果定位元素z-index没有发生嵌套：

1.后来居上的准则

2.哪个大，哪个上

例如

如果定位元素z-index发生嵌套：

1.祖先优先原则;

例如

其他参与层叠上下文的属性

1.display:flex 影响层叠，要和子元素配合z-index不为auto

2.opacity不为1的时候

3.给元素加rotate

css之z-index的更多相关文章

  1. img和css背景的选择

    在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人), ...

  2. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  4. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  5. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  6. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  7. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  8. 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...

  9. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  10. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

随机推荐

  1. Android应用开发-Activity（重制版）

    Android四大组件:Activity,Service,Broadcast Receiver,Content Provider Activity是Context的子类,同时实现了Window.Cal ...

  2. 常见数据结构之JavaScript实现

    常见数据结构之JavaScript实现 随着前端技术的不断发展,投入到前端开发的人数也越来越多,招聘的前端职位也越来越火,大有前几年iOS开发那阵热潮.早两年,前端找工作很少问到关于数据结构和算法的, ...

  3. angular2开发01

    // */ // ]]> angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准 ...

  4. day25、 静态属性、类方法、静态方法、组合、继承、

    一. 静态属性.类方法.静态方法 1.1静态属性 class Room: def __init__(self,name,owner,width,length): self.name=name self ...

  5. IIS7.5 伪静态 脚本映射 配置方法

    首先,是IIS7.0的配置,由于Windows Server 2008操作系统默认的IIS版本为7.0,我们知道,IIS7.0与IIS6.0 核心注意的地方:先要将应用池设置为集成模式,修改OK后,再 ...

  6. Filezilla 适用于 Win2003 和 WinXP 的版本

    服务器端版本为: 0.9.43 客户端版本为: 3.9.01

  7. [转载]VIM 教程：Learn Vim Progressively

    文章来源:http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/   Learn Vim Progressively   TL ...

  8. Linux常见命令

    du -sh 查看当前文件夹大小 tail -f /var/log/nginx/access.log 查看日志 vsFTPd Linux上面的ftp df -lh 查看磁盘 df -i 查看inode ...

  9. 每天一个 Linux 命令（17）：whereis 命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...

  10. oracle大表添加字段default经验分享

    当oracle单表数据量上亿时,对表进行alter table aa add column_1 varchar2(2) defalut 'Y';时,效率及安全性是必须考虑的因素. 本帖以2亿的数据表a ...