要想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. zabbix3.0安装【server】

    关于zabbix的介绍,就不多说了,功能强大,架构前卫,自己直接去官网研究 在这里,还是秉承研究一个应用或者技术,都要自己动手安装部署,实战操作,才能深入掌握,基于这个精神,zabbix从安装部署开始 ...

  2. Assembler : The Basics In Reversing

    Assembler : The Basics In Reversing Indeed: the basics!! This is all far from complete but covers ab ...

  3. SVN设置钩子

    在post-commit 文件后增加两行: WEB_DIR="/data/www/wb.abc.cn/2.4" /usr/bin/svn update $WEB_DIR --use ...

  4. 转贴：让Windows 2008 R2 64bit支持ASP.NET 1.1应用程序

    随着 Windows Server 2003 的支持期限到期, 最近有很多企业将目前很多的 Windows Server 2003 升级到 Windows 2008 R2. 之前有许多 Web App ...

  5. 在Eclipse中使用JUnit4进行单元测试（初级篇）

    首先,我们来一个傻瓜式速成教程,不要问为什么,Follow Me,先来体验一下单元测试的快感! 首先新建一个项目叫JUnit_Test,我们编写一个Calculator类,这是一个能够简单实现加减乘除 ...

  6. javascript slice

    定义和用法 slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分. 语法 stringObject.slice(start,end) 参数 描述 start 要抽取的片断的起始下 ...

  7. maven 手动安装本地jar包（转载）

    From:http://www.cnblogs.com/leiOOlei/p/3356834.html 安装命令: -Dpackaging=jar

  8. maven详解之生命周期与插件

    Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...

  9. 利用nodejs搭建服务器，测试AJAX

    最近学习了AJAX一直没有进行过测试,前今天了解了Noejs搭建本地服务器下就尝试了一下.通过AJAX请求的方式获取HTTP服务器返回数据的代码 首先创建一个serve.js的文件.并写入以下代码. ...

  10. oracle rac自动生成awr

    cat awr.sql ######EXEC P_AWR_REPORT('201604251000', '201604251100', 'D_OUTPUT', '', FALSE); FALSE为ra ...