要想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. 可以链接不同源的资源的html元素(能实现跨域)

    可以链接不同源的资源的html元素(能实现跨域): img.script.css.video.audio.object.embed.applet.@font-face.frame.iframe等. ( ...

  2. SQL Server常用的性能诊断语句

    /* 常规服务器动态管理对象包括: dm_db_*:数据库和数据库对象 dm_exec_*:执行用户代码和关联的连接 dm_os_*:内存.锁定和时间安排 dm_tran_*:事务和隔离 dm_io_ ...

  3. ArcGis 字段计算表达式写法注意事项

    在ArcGis中,经常用到字段的计算.对于复杂的字段计算,需要写代码来实现,在使用ESRI.ArcGIS.DataManagementTools.CalculateField 类时,Python代码中 ...

  4. linux---mysql安装

    一.查询本机是否有mysql service mysql status 二.检查已安装的mysql版本 mysql –uroot -p status 三.查看已安装的mysql的组件 dpkg --g ...

  5. Debian MySQL 卸载和安装 PHP安装

    如果是apt-get安装的 sudo apt-get --purge remove mysql-serversudo apt-get --purge remove mysql-clientsudo a ...

  6. Winfrom 开发小技能

    1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...

  7. 独自handle一个数据库大程有感

    这学期数据库课程,最后的大程是写一个MiniSQL的数据库实现,要求很简单,建删表,建删单值索引,支持主键和unique定义,支持最简单的select,只要支持3个类型:int,float,char( ...

  8. JSTL 核心标签库 使用

    JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out.set.remove.catch 2.流程控制标签:if.choose.when.otherwise 3.循环标签:f ...

  9. CRM 启用或禁用自定义代码执行

    启用自定义代码执行 1.打开 Windows PowerShell 命令窗口. 2.添加 Microsoft Dynamics 365 PowerShell 管理单元: Add-PSSnapin Mi ...

  10. 使用VS2010在Coding.net上进行代码托管

    网上有VS2010和Github结合使用办法,但是Github在国内使用太慢,本文使用相同的配置方法稍作改动让VS2010代码托管在coding.net平台上.由于只是稍做记录让自己不会遗忘,所以叙述 ...