很多其它关于z-index

在我曾经的认知里,在一些定位元素中(position为absolute、fixed或者relative),z-index越大就显示在越前面。

比方以下的样例:

wrap1、wrap2、wrap3和box的position均为absolute。当中box为wrap1的子元素。z-index为10。

<div class="wrap wrap1"><div class="box"></div></div>
<div class="wrap wrap2"></div>
<div class="wrap wrap3">
.wrap{ position: absolute;}
.box{z-index: 1; }

接下来我们给wrap1加入opacity属性;

.wrap1{opacity: .99;}

结果例如以下图所看到的,box不再显示在最上面,而是被wrap2所遮挡。

.wrap1{opacity: .99;}

全部元素均为absolute定位,box的z-index为10,为什么没有显示在最上面。这里就涉及到一个“堆叠上下文”。下文将堆叠上下文简称为层。

每个层都有唯一的根节点。当一个元素创建一个层,那么它的全部子元素都会受到父元素的堆叠顺序影响。

意味着假设一个元素位于一个最低位置的层,那你z-index设置得再大,它也不会出如今其他层元素的上面。

哪些情况会产生新的层:

  • 当一个元素位于HTML文档的最外层(<html>元素)
  • 当一个元素被定位了而且拥有一个z-index值(不为auto)
  • 当一个元素被设置了opacity。transforms, filters, css-regions, paged media等属性。

最初仅仅有box符合产生一个新层的条件,同一时候它的z-index最大,因此它显示在最上面。

可是当我们将wrap1的opacity设置为0.99的时候,就是产生了一个新的层,这个层的z-index和wrap2、wrap3的z-index同样。

依照元素书写顺序,wrap1应该显示在最以下。这个时候尽管box的z-index的值最大,可是仅仅能在wrap1产生的层起作用。对wrap1之外的元素没有影响。

下次当你使用z-index达不到效果时候,记得检查一下它的堆叠上下文环境哦^V^。demo戳这里:http://runjs.cn/detail/tlwoy4ew

时间: 07-23

很多其它关于z-index的相关文章

Index Seek和Index Scan的区别

Index Seek是Sql Server执行查询语句时利用建立的索引进行查找,索引是B树结构,Sql Server先查找索引树的根节点,一级一级向下查找,在查找到相应叶子节点后,取出叶子节点的数据.对于聚集索引,叶子节点是整个表的数据,能够获取到所有列的数据,而对于非聚集索引,叶子节点存储的是索引列的数据,如果索引有包含列,那么叶子节点中存储有包含列的数据,获取的数据是索引列和包含列,如果还需要其他列的数据,那么必须进行key lookup,根据索引叶子节点包含的“行地址”信息到源表中去获取数

v-for为什么要加key,能用index作为key么

前言 在vue中使用v-for时,一直有几个疑问: v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目. virtual dom 要理解diff的过程,先要对virtual dom有个了解,这里简单介绍下. [作用] 我们都知道重绘和回流,回流会导致dom重新渲染,比较耗性能:而virtual dom就是用一个对象去代替dom对象,当有多次更新dom的动作时,不会立即更新dom,而是将变化保存到一个对象中,最终一次性将改变渲染出

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

WEB环境相关技术、配置

一.简介(基本概念) web开发中基本概念和用到的技术: A - AJAX AJAX 全称为" Asynchronous JavaScript and XML "(异步 JavaScript 和 XML ),是一种创建交互式网页应用的 网页开发 技术.根据Ajax提出者Jesse James Garrett建议,AJAX: 使用 XHTML + CSS 来表示信息:使用 JavaScript 操作 DOM (Document Object Model)进行动态显示及交互:使用 XML

【JavaScript】你知道吗?Web的26项基本概念和技术

Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. A — AJAX AJAX 全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.根据Ajax提出者Jesse James Garrett建议,AJAX: 使用XHTML+CSS来表示信息: 使用Java

CSS中的层叠上下文和层叠顺序

copy @ from http://www.zhangxinxu.com 四.务必牢记的层叠准则 下面这两个是层叠领域的黄金准则.当元素发生层叠的时候,其覆盖关系遵循下面2个准则: 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个.通俗讲就是官大的压死官小的. 后来居上:当元素的层叠水平一致.层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素. 在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个

OpenCL学习笔记(三):OpenCL安装,编程简介与helloworld

OpenCL安装 安装我不打算花篇幅写,原因是OpenCL实在是可以太多的平台+环境下实现了,包括GPU和FPGA,以及不同的器件支持,在这里我主要把网上可以找到比较不错的经验贴列一下,方便大家,我主要关注了FPGA的,其他GPU的大家网上搜搜吧: altera opencl sdk下载: https://www.altera.com.cn/products/design-software/embedded-software-developers/opencl/overview.html alt

你知道吗?Web的26项基本概念和技术

这是我在网上看到一篇不错的文章,拿出来与大家分享一下:希望有所帮助 作者: 小鱼  来源: 前端里  发布时间: 2014-08-01 22:56  阅读: 10477 次  推荐: 51   原文链接   [收藏] Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. A - AJAX AJAX 全称为"Asynchronous JavaScript

Ogre2.0 全新功能打造新3D引擎

不知当初是在那看到,说是Ogre2.0浪费了一个版本号,当时也没多想,以为没多大更新,一直到现在想做一个编辑器时,忽然想到要看下最新版本的更新,不看不知道,一看吓一跳,所以说,网络上的话少信,你不认识别人,别人张嘴就来,对别人也没损失,还可以装B下,靠. 从现在Ogre2.1的代码来看,大约总结下,更新包含去掉过多的设计模式,SoA的数据结构(用于SIMD,DOD),新的线程模式,新的渲染流程与场景更新,新的材质管理系统,新的模型格式,新的合成器方案,更新是全方面的,可以说,Ogre2.x与Og

四种比较简单的图像显著性区域特征提取方法原理及实现-----&gt; AC/HC/LC/FT。

laviewpbt  2014.8.4 编辑 Email:[email protected]   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以下将研究的一些收获和经验共享. 先从最简单的最容易实现的算法说起吧: 1. LC算法 参考论文:Visual Attention Detection in Video Sequences Using Spatiotemporal Cues. Yun Zhai and Mubarak Shah.  Pa