`
lxs647
  • 浏览: 523123 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在IE中的z-index属性

阅读更多

z-index属性简介

引用:

z-index : auto | number

auto:默认值。
number:无单位的整数值,可为负数。

z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。

注意:这个属性不会作用于窗口控件,如selct 对象。在IE 5.5+中,iframe 对象开始支持此属性。而在之前的浏览器版本中,iframe 对象是窗口控件,会忽略此属


z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

每一个定位元素都归属于一个stacking context。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),定位子元素会以这个local stacking context为参考,用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。

当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。

当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别(stack level)来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。例如:

定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟关系(z-index:200)。你会发现无论A1的z-index是多大,也会被z-index是200的B所覆盖,因为A的z-index只有100。

阅读更详细的内容:http://www.w3.org/TR/CSS21/visuren.html#z-index

 

分享到:
评论

相关推荐

    ie6中解决z-index

    在IE6浏览器中,`z-index` 是一个让人头疼的问题,因为它的行为与现代浏览器相比存在差异。`z-index` 属性在CSS中用于控制元素的堆叠顺序,决定哪些元素应该覆盖在其他元素之上。然而,IE6的实现并不完善,导致了...

    ie6 z-index不起作用的完美解决方法

    其中,z-index属性在IE6下的表现就是一个典型的案例。z-index属性用于控制Web页面中元素的堆叠顺序,即元素的层级高低。在现代浏览器中,通常给定一个较大的z-index值就可以让元素浮于其他元素之上。然而,在IE6...

    margin 负值引起的层级(z-index)问题

    首先,需要了解的是,当一个元素设置了position属性为非static(如relative、absolute、fixed等)时,该元素才会生成层叠上下文,此时它的z-index属性才能起作用。如果元素的position属性是static,那么即使设置了z-...

    div层调整z-index属性无效原因分析及解决方法

    在CSS中,z-index属性只能作用于定位元素,即那些position属性为relative、absolute或fixed的元素。当元素被设置为static时(也是position属性的默认值),其z-index属性将不会生效。这是因为在静态定位的元素上,...

    css里的z-index的使用

    本文将深入探讨CSS中的z-index属性,解析其工作原理,以及如何在实际项目中正确使用它,同时也会提及一些在不同浏览器环境下的兼容性问题。 #### z-index的基本概念 z-index是CSS中用于控制元素堆叠顺序的属性。在...

    深入理解css中position属性及z-index属性(推荐)

    通过上述内容,我们可以理解到,通过调整position和z-index属性,我们可以实现精细的页面布局控制。例如,我们可以让一个菜单始终固定在页面的顶部,也可以通过改变z-index值来调整页面元素的覆盖顺序。这些布局技巧...

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

    在提供的压缩包文件中,`z-index-ie.html`和`z-index.html`可能是关于`z-index`属性在不同浏览器(尤其是IE)中的实现和兼容性的示例或教程。IE浏览器在处理`z-index`时可能存在一些特定的问题,比如早期版本对`...

    jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!

    本文将重点讨论如何利用jQuery插件来解决在Internet Explorer 6(IE6)浏览器中遇到的一个常见问题:当尝试为`<select>`元素设置`z-index`属性时,该设置往往无效,导致元素无法正确地覆盖其他内容。这个问题在现代...

    chrome中position:fixed对z-index的影响

    dom结构:正常的实现方式很容易:因为B本身就在A的后面,当A和B都设置了position属性(非static),且没有设置z-index的时候,其层叠关系是后面的元素覆盖前面的元素,这样只需要给A-child设置z-index属性值即可。...

    div层调整z-index属性在IE中无效原因分析及解决方法

    本文将深入探讨z-index属性在IE中无效的原因以及相应的解决策略。 首先,理解`z-index`生效的基本条件至关重要。一个元素的`z-index`属性只有在其`position`属性被设置为`relative`、`absolute`或`fixed`时才会生效...

    深入理解css中position属性及z-index属性1

    在实际应用中,正确理解和使用`position`和`z-index`可以实现复杂而精确的网页布局,如创建弹出框、浮动导航栏等效果。然而,过度依赖定位可能会导致布局变得难以维护,因此在设计时应适度使用,并结合其他布局技术...

    学习CSS网页制作:z-index在IE中的迷惑.pdf

    在IE5.5及更高版本中,`iframe`开始支持`z-index`,但在更早的版本中,`iframe`被视为窗口控件,因此会忽略`z-index`属性。 `z-index`的工作原理涉及到一个叫做"stacking context"的概念。每个定位元素都在一个栈中...

    css z-index 在IE中的迷惑

    z-index属性简介 引用: z-index : auto | number auto:默认值。 number:无单位的整数值,可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的...

    关于IE7 z-index的浏览器兼容性问题完美解决方案

    在IE7中,z-index属性在处理层叠上下文(stacking context)时存在一个已知的兼容性问题。IE7的浏览器会对定位元素(positioned elements)创建一个新的堆叠上下文(stacking context),即便这个元素的z-index值被...

    IE7 设置z-index的覆盖问题的解决方法

    在这些版本的IE浏览器中,当父元素设置了position:relative,其子元素所设置的z-index属性有时会失效,导致层叠顺序与预期不符。 z-index属性是CSS中的一个属性,它控制着定位元素的堆叠顺序。正常情况下,具有更高...

    css设置z-index 失效的解决方法

    在CSS布局中,`z-index`属性用于控制元素在Z轴上的堆叠顺序,从而决定哪个元素会覆盖另一个。然而,有时我们可能会遇到设置`z-index`后却无法生效的问题。这个问题通常与元素的位置属性(position)有关。在标题和...

    深入剖析z-index属性

    在Web前端开发中,z-index属性是CSS中用于控制元素在三维空间中的堆叠顺序的关键属性。理解并熟练运用z-index能够帮助开发者解决元素重叠时的显示问题,确保元素按照预期的方式进行层叠。本文将深入探讨z-index的...

    浅析CSS--元素重叠及position定位的z-index顺序.docx

    在CSS布局中,元素重叠和`position`定位的`z-index`顺序是常见的问题,尤其是在复杂的网页设计中。本文将深入探讨这个问题,以便更好地理解和解决问题。 首先,我们需要理解元素的默认行为。在HTML文档中,元素按照...

    CSS中的z-index属性基本使用教程

    在CSS中,`z-index`属性是一个至关重要的概念,它用于控制元素的堆叠顺序,决定哪些元素在前面,哪些元素在后面。当多个元素在同一位置重叠时,`z-index`属性决定了它们的层级关系。`z-index`只对设置了定位属性(如...

Global site tag (gtag.js) - Google Analytics