关于.... Z-Index?

时间:2010-02-21 11:16:10

标签: javascript html css vb.net z-index

这个属性让我感到困惑。

好吧..我在谷歌搜索:

什么是z-index?

z-index属性指定元素的堆栈顺序。 堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。 注意:z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定)。 Answer Source

z-index使用什么?

元素彼此重叠的顺序。 为此,您可以为每个元素分配一个数字(z-index)。系统是具有较高编号的元素与具有较低编号的元素重叠。 Answer Source

好的我现在明白了,它组织了元素,我们可以使用任何数字...更高的z-index数字出现在所有元素上......好看。

z-index and jquery ..非常简单,非常好

...但我从答案中注意到它取决于位置属性,所以 - > ...(谷歌)..

z-index和position之间的关系是什么?

demo-->>> source

好的......所以z-index和位置是一对......必须在一起..

需要更多信息::

它会在浏览器(IE7,IE8,Chrome等等)中产生任何冲突吗?

z-index使用什么或者我们可以用z-index做什么(取决于标签)?

...等吗

如果我理解错了,请纠正我......

提前致谢。

4 个答案:

答案 0 :(得分:6)

Z-index是一个属性,用于确定哪个html元素在重叠时出现在另一个html元素之上。基本思想是具有最高z-index的元素是“在顶部”。

默认情况下,元素的z-index为零,但是如果它们重叠,则将一个元素的css属性设置为1,将另一个元素的css属性设置为5将使后一个元素位于前者的“顶部”。

到目前为止,这么简单,但有几点需要注意。

正如另一个答案中已经提到的那样,如果元素的位置是绝对的,固定的或相对的,那么z-index只会产生影响。 (即css属性“position”)。未定位元素的z-index为零。

进一步使事情复杂化(根据我的经验,通常不被理解的区域)是堆叠上下文的概念。更多信息可以在this等文章中找到。简而言之,每次显式设置新的z-index时,都会启动一个新的堆栈上下文。设置了z-index的所有子元素现在都在这个新的堆叠上下文中,可能高于或低于另一个不相关元素的堆叠上下文。

此堆叠上下文是什么意思?这意味着z-index为100的元素不一定位于z-index为1的元素之上。如果它们位于不同的堆栈上下文中,则只有堆叠上下文的z-index本身很重要。

答案 1 :(得分:3)

我建议您在 SmashingMagzine 上查看此属性。

<强> The Z-Index CSS Property: A Comprehensive Look

它包含了这个属性的所有细节和螺栓,并附有很好的例子和演示。

答案 2 :(得分:1)

要记住的最重要的事情是,如果元素具有相对位置,绝对位置或固定位置,则z-index仅适用

答案 3 :(得分:1)

我不完全确定你在问什么,但是对于大部分你只需要使用z-index如果你正在做复杂的样式,例如悬停工具提示或下拉导航,只是为了确保它们显示在其他页面内容上。

对于基本设计,您通常应该避免使用position和z-index属性,因为通常可以通过浮动等更好的性能和浏览器兼容性来实现相同的效果。

Sarfraz发布的Smashing Magazine链接是关于该主题的优秀文章,如果您仍在努力了解该房产的功能,那么这是一个很好的参考点。