要想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. Oracle10g RAC关闭及启动步骤

    情况1:需要关闭DB(所有实例),OS及Server 停RAC的顺序是: 1)数据库 -〉 2)ASM   -〉 3)CRS a.首先停止Oracle10g环境 $ lsnrctl stop (每个节 ...

  2. java并发编程系列

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

  3. 项目管理-Kick OFF 简称KO

    KO的内容包括以下几个过程: 1.项目背景 我们项目在哪里?说过去,做项目之前的“悲惨境地”,明确问题根源在哪里,明白为什么要做这个项目. 2.项目意义.目的与目标 我们项目去哪里?说将来,项目完成之 ...

  4. [综] Latent Dirichlet Allocation(LDA)主题模型算法

    多项分布 http://szjc.math168.com/book/ebookdetail.aspx?cateid=1&&sectionid=983 二项分布和多项分布 http:// ...

  5. putty远程连接ubuntu

      步骤一.在ubuntu系统中安装ssh,可使用如下的命令进行安装: sudo apt-get install openssh-server步骤二.为了保险起见,安装完成后重启一下ssh服务,命令如 ...

  6. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  7. Allegro 快捷键设置

    一.快捷键设置 Allegro可以通过修改env文件来设置快捷键,这对从其它软件如AD或PADS迁移过来的用户来说,可以沿用以前的操作习惯,还是很有意义的. Allegro的变量文件一共有2个:一个是 ...

  8. 如何在Chrome下Debug Mocha的测试

    简介 经过前两篇文章的介绍,相信读者对Mocha应该有一定的认知了,本文重点讲述如何在Chrome下Debug Mocha Test, 方便你在测试fail的时候troubleshooting. 关键 ...

  9. 【转载】nodejs，npm，express分别什么？

    很多刚刚接触nodejs的初学者,都会经历一个很繁冗的环境安装过程. 一般主要要安装nodejs,npm和express三样东西.那么这三样东西分别是干什么的呢? 本篇文章就大致介绍一下这三样东西分别 ...

  10. XE7 & IOS开发之开发账号（2）：发布证书、发布授权profile的申请使用，附Ad hoc真机调试、生成ipa文件演示（XCode所有版本通用，有图有真相）

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...