要想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. CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...

  2. 【MySQL】悲观锁&乐观锁

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.本文将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍. 悲观锁(Pessimistic Lock) 悲观锁的 ...

  3. Automation Test in Maya Plugin Development

    现状和问题- 开发插件的功能A的时候随手建立场景, 测试插件的功能A. 测试通过后,测试场景就被丢掉.- 发现插件的功能A有bug时, 修改代码, 然后随手建立场景, 测试bug. 测试通过后,测试场 ...

  4. 黄聪：关闭Win2003开机提示“上次意外关机”对话框

    很多人在使用win2003服务器(特别是vps)的时候,都会意外关机,然后出现开机提示“上次意外关机”对话框,如果不及时发现,会影响到使用该服务器的网站,所以必须把这提示关闭,方法如下: 1.开始菜单 ...

  5. js api 实现钉钉免登

    js api 实现钉钉免登,用于从钉钉微应用跳转到企业内部的oa,erp等,我刚刚实施完了我公司的这个功能,钉钉用起来还不错. 1 js api 实现钉钉免登,页面配置. <title>利 ...

  6. Java应用程序监控JavaMelody

    JavaMelody是运行在Java Web容器中,用来监控Java内存和J服务器CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请求等的执行数量,平均执行时间,错误百分 ...

  7. MVC3升级为MVC4

    在程序包管理控制台输入 Install-Package UpgradeMvc3ToMvc4 等待 升级完成

  8. Linux通过NAT方式配置网络

    步骤:1.将虚拟机的网卡VMware Network Adapter VMnet8改成DHCP自动获取IP.2.将Linux虚拟机的网卡自定义连接到VMware Network Adapter VMn ...

  9. 源码阅读笔记 - 2 std::vector (2) 关于Allocator Aware Container特性

    所有的STL容器,都保存一个或默认,或由用户提供的allocator的实例,用来提供对象内存分配和构造的方法(除了std::array),这样的容器,被称作Allocator Aware Contai ...

  10. CRM 2016 自定义对话框

    项目背景: CRM表单在操作时会有一些提示,或者交互的对话框. 直接 使用js的alert 和  confirm,网格上有些不协调. 以前在项目中使用过jquery 的,但是CRM官方不建议使用jqu ...