`
86asm
  • 浏览: 199976 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

z-index 层叠顺序

 
阅读更多

关键字: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中怎么用不了)。

2
1
分享到:
评论
2 楼 86asm 2011-03-07  
hyj1254 写道
'z-index' 
Value:   auto | <integer> | inherit  
Initial:   auto  
Applies to:   positioned elements  

z-index只对非static元素起作用。也就是说把元素本身position设为absolute或relative(fixed没试过)就行了。
另外有人说问对了问题其实就已经成功了一半,不知道怎么提问其实是正常的。


谢谢你的提醒

以下内容摘自网络:
   为什么css中设置z-index不起作用?
    * 要想给元素设置z-index样式,必须先让它变成定位元素,再通俗一点说,就是要给元素设置一个postion:relative(或者 absolute或者fixed)样式。
    * 不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。这一点详细解释和原因在《精通html和css设计模式》一书中较为详细的解释。

这篇文章也略有分析:
http://www.zhangxinxu.com/wordpress/?p=471
1 楼 hyj1254 2011-02-23  
'z-index' 
Value:   auto | <integer> | inherit  
Initial:   auto  
Applies to:   positioned elements  

z-index只对非static元素起作用。也就是说把元素本身position设为absolute或relative(fixed没试过)就行了。
另外有人说问对了问题其实就已经成功了一半,不知道怎么提问其实是正常的。

相关推荐

    HTML5&CSS3网页制作:zindex层叠等级属性.pptx

    z-index层叠等级属性 z-index层叠等级属性 01 z-index层叠等级属性 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。 定位导致重叠 z-index可以调整重叠定位元素的堆叠顺序,其取值可为正整数、负整数和...

    深入剖析z-index属性

    一、z-index七阶层叠顺序表 1.层叠顺序的大小比较: background/border &lt; 负z-index &lt; block块状水平盒子 &lt; float浮动盒子 &lt; inline/inline-block水平盒子 &lt; z-index:auto或者看成z-index:0 /不依赖z...

    深入解析CSS中z-index属性对层叠顺序的处理

    经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序。总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。 元素位置重叠的背景...

    CSS教程:元素层叠级别及z-index

    原文:http://rong179.blogbus.com/logs/24966909.html声明定位元素:position属性值设置除默认值static以外的元素...平台:win/IE win/FFz-index:用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序值:

    详解CSS中的z-index属性在层叠布局中的用法

    在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level)。受益于它,你能做Popup, DropDown, Tips, 图文替换等等。 在开始本篇之前,或许我们要先了解一下关于z-index的...

    css 层叠与z-index的示例代码

    既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级”。 默认情况下,图文是网页的核心,因此内联元素的等级理应最高;然后是布局,其中浮动元素(脱离文档流)的等级高于块级元素;最低等级是设置背景...

    CSS教程:网页布局定位及z-index解释

    用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值:auto | 整数 | inherit默认:auto适用于:定位元素继承性:no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向...

    举例详解CSS的z-index属性的使用

    除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当他们相互覆盖时, z轴顺序就变得十分重要。 — CSS 2.1 Section 9.9.1 – Layered presentation默认的摆放规则 假定元素没有指定z-index...

    解决CSS3的opacity属性带来的层叠顺序问题

    在最近的一个作品中,在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题。如果两个层发生了重叠,使用了 opacity 属性并且...而对于没有激活 z-index 的普通层来说,如果那个层使用了属性值小于1的 opacit

    DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

    1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了...

    HTML5图片层叠的实现示例

    z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。 position:有以下几个值:static,relative,absolute,fixed。 Static:静态定位。如果...

    CSS中层叠上下文的具体使用

    在有些 CSS 相互影响作用下,对元素设置的 z-index 并不会按实际大小叠加,一直不明白其中的原理,最近特意查了一下相关资料,做一个小总结。 层叠上下文与层叠顺序 层叠上下文(stacking content)是 HTML 中的三维...

    css入门笔记

    必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; ...

Global site tag (gtag.js) - Google Analytics