关于css的层叠上下文和层叠顺序问题

关于css的层叠上下文和层叠样式问题

最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮住了,百思不得解,谷歌了白天,才知道是层叠上下文、层叠顺序搞得鬼,所以这里把搜索的结果记下来,帮自己,也帮能够看到的盆友。

这里贴出一个解释很详细的地址,要是看了不太明白的,可以戳这里

首先层叠上下文是什么鬼呢?

层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,那么他这z轴方向就会比其他元素高一些。可以理解为在网页中的同一片区域中。如果有两个元素重叠,那么那个含有层叠上下文的元素一定覆盖在没有层叠上下文元素的上面。

那么层叠顺序又是什么鬼呢?

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,层叠顺序即是层叠的规则。我想了解css的童鞋一定知道页面上的元素是分层级的。background/border<负z-index<block块状水平盒子<float浮动盒子<inline/inline-block水平盒子<z-index:auto或看成z-inde:0<正z-index;

没错,这就是层叠顺序,但这只是css2.1时代的层叠顺序,当css3出现之后,就出现了一些令人蛋疼的东西了,我遇到的问题也正是css3的animate属性带来的层叠上下文变化所带来的影响;

这里有一些关于层叠准则和层叠上下文特性,了解了这些,再加上css3带来的新的层叠上下文属性,就不难发下我们的问题出现在哪里了;

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:
  1. 谁大谁上:当具有明显的层叠标识的时候,如z-index值时,在同一个层叠上下文领域,层叠水平值大的那个覆盖层叠水平值小的那个。
  2. 后来居上:当元素层叠水平、层叠顺序一致时,在DOm流中处于后面的元素会覆盖前面的元素。
层叠上下文元素有如下特性:
  1. 层叠上下文的层叠水平要比普通元素高(在css2.1时代,层叠上下文元素应该就是有定位属性的这一类元素吧)
  2. 层叠上下文可以阻断元素的混合模式
  3. 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文
  4. 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素
  5. 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。
下面我们来看看CSS3与新时代的层叠上下文
  1. z-index值不为autoflex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.

结论:

不难看出,我的问题是出来了opacity和dom的顺序上了,在给图片设置fade-in是,改变的是它的opacity属性,这样就将它变成了层叠上上下文元素了,而我的文字又在它的上方,且没有设置z-index属性,自然当它的opacity属性变成1之后文字就被遮住了。

最后希望这篇文章对大家有所帮助。同事再次贴出我认为比较讲解比较详细的一片blog供大家参考,戳这里

时间: 2024-10-07 10:25:31

关于css的层叠上下文和层叠顺序问题的相关文章

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

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

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

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

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

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

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

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

什么是层叠上下文?如何形层叠上下文?层叠顺序是怎样的?

在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.层叠上下文即元素在某个层级上z轴方向的排列关系. 那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context).层叠等级 (层叠水平, Stacking Level).层叠顺序 (层叠次序, 堆叠顺序, Stacking Order).z-index. 1. 层叠上下文 (Stacking Context) 文章<关于z-index 那些你不知道的事>有一个很好的比喻,这

CSS层叠上下文、层叠等级、层叠顺序、z-index

以往,由于自己使用z-index的频率不大,所以对这个CSS属性存在比较片面的认识.一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序.z-index值越大在Z轴 上就越靠上,也就是离屏幕观察者越近.最后才发现这个认识存在很大的问题: 首先,z-index属性值并不是在任何元素上都有效果.它仅在定位元素(定义了position属性,且属性值为非static值的元素)上有效果. 判断元素在Z轴上的堆叠顺序,不仅仅是直接比较两个元素的z-index值的大小,这个堆叠顺序实际由元素的

[BUGCASE]层叠上下文和z-index属性使用不当引发的文本被遮挡的问题

一.问题描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段一个提示的特效,所以做了一个提示层 这个提示层被固定(拖动表格的水平滚动条时固定)的表格列遮住 无论设置该提示层的z-index为多大,都不能让其在固定表格列列之上 效果如下: 二.问题分析 通过对页面的DOM层级进行分析,把有可能影响层级的部分抽出来: 主要有以下几个部分会影响到元素的层级(关于设置了哪些属性会影响层级请看后面的附),下面逐一分析: A元素和B元素都有一个样式是positio

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 3.层叠顺序(stacking level)与堆栈上下文(stacking context)知多少? z-index 看上去其实很简单,根据 z-index 的高低决定

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选