要想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. java并发编程系列

    1.多线程的概念与使用:java笔记五:多线程的使用 2.多线程产生的问题,解决的方法, 1.引入线程池的原因:Java并发编程:线程池的使用 2.高并发情况下数据库提交:jdbc事务处理, 理解事务 ...

  2. Fastboot模式和Recovery模式

    http://blog.csdn.net/luoshengyang/article/details/29688041 在回答第一个问题之前,我们先来看看Android设备从硬件到系统的结构,如图1所示 ...

  3. IE8、IE9浏览器下报：JSON未定义 解决方法

    IE8.IE9浏览器下报:JSON未定义的问题 解决方法: 在jsp中引入如下代码 <!-- 解决 IE8.IE9 下显示混乱的问题--><% String browserStrin ...

  4. 将yyyyMMdd，dd/MM/yyyy 类型字符串转换为datetime 类型 yyyy-MM-dd C#

    DateTime ConvertDate = DateTime.ParseExact(", "yyyyMMdd", null, System.Globalization. ...

  5. Java创建WebService服务及客户端实现（转）

    简介 WebService是一种服务的提供方式,通过WebService,不同应用间相互间调用变的很方便,网络上有很多常用的WebService服务,如:http://developer.51cto. ...

  6. 主成分分析（PCA）特征选择算法详解

    1. 问题 真实的训练数据总是存在各种各样的问题: 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. 拿到 ...

  7. JAVA下载文件中文乱码问题

    http://blog.itpub.net/92037/viewspace-788900/ 最后的中文乱码没有解决 现在我在系统中用到了两个组件,smartupload,一个支持中文,一个不支持.但是 ...

  8. jquery mobile button样式设置

    <a href="#" class="ui-btn">提交</a> ui-btn表示按钮样式 ui-btn-a,ui-btn-b:the ...

  9. .Net中的泛型(where T : class的含义)

    Eg: class A<T>where T:new() where表明了对类型变量T的约束关系.where T: A表示类型变量是继承于A的,或者是A本身.where T:new()指明了 ...

  10. Oracle Hang分析--转载

    1. 数据库hang的几种可能性 oracle 死锁 或者系统负载非常高比如cpu使用或其他一些锁等待很高都可能导致系统hang住,比如大量的DX锁. 通常来说,我们所指的系统hang住,是指应用无响 ...