关键字:z-index 不起作用 z-index 层叠顺序 失效
今天一网友让我帮看一个页面,说是一个设置过z-index值很大的div块仍然被遮住,不能显示。我看了下他说的页面,发现和我几个月前遇见的问题基本一样。现在把解决方法写在下面,希望对再遇见此问题的人有所帮助。
z-index,特别是在嵌套的div元素中使用这个属性时,z-index的值即使设置的很大,有时仍不能起作用。解决方法就是如果你希望的div块能在最前显示,不被其它元素遮住。除了要把这个希望能在最前显示的div元素的z-index设置一个较大的值外,还应把它的父级元素的z-index设置一个小值。如果设置了父级元素仍不起作用,那还需继续设置它的父级元素的父级元素的z-index为一个较小值。当然也可以直接在body中直接设置z-index为一个较小值。
ps:怎么提问,我觉得应尽量把问题的本质提取出来,把大问题进行分成一些小问题,这样想帮你的人便能很快地找到问题实质。在问别人问题时,我通常都会对问题进行一次重新加工,以便别人能很快把焦点集中在我想问的问题上来。还有不要问一些过于大的问题、过于笼统的问题(比如:xxx在xxx中怎么用不了)。
分享到:
相关推荐
z-index层叠等级属性 z-index层叠等级属性 01 z-index层叠等级属性 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。 定位导致重叠 z-index可以调整重叠定位元素的堆叠顺序,其取值可为正整数、负整数和...
一、z-index七阶层叠顺序表 1.层叠顺序的大小比较: background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依赖z...
经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序。总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。 元素位置重叠的背景...
原文:http://rong179.blogbus.com/logs/24966909.html声明定位元素:position属性值设置除默认值static以外的元素...平台:win/IE win/FFz-index:用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序值:
在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level)。受益于它,你能做Popup, DropDown, Tips, 图文替换等等。 在开始本篇之前,或许我们要先了解一下关于z-index的...
既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级”。 默认情况下,图文是网页的核心,因此内联元素的等级理应最高;然后是布局,其中浮动元素(脱离文档流)的等级高于块级元素;最低等级是设置背景...
用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值:auto | 整数 | inherit默认:auto适用于:定位元素继承性:no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向...
除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当他们相互覆盖时, z轴顺序就变得十分重要。 — CSS 2.1 Section 9.9.1 – Layered presentation默认的摆放规则 假定元素没有指定z-index...
在最近的一个作品中,在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题。如果两个层发生了重叠,使用了 opacity 属性并且...而对于没有激活 z-index 的普通层来说,如果那个层使用了属性值小于1的 opacit
1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了...
z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。 position:有以下几个值:static,relative,absolute,fixed。 Static:静态定位。如果...
在有些 CSS 相互影响作用下,对元素设置的 z-index 并不会按实际大小叠加,一直不明白其中的原理,最近特意查了一下相关资料,做一个小总结。 层叠上下文与层叠顺序 层叠上下文(stacking content)是 HTML 中的三维...
必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; ...