关于...Z-Index？
这个属性让我很困惑。
好吧..我在谷歌中搜索：
什么是 z-index？
z-index 属性指定元素的堆栈顺序。 具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。 注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。 答案来源
z-index 有何用途？
元素相互重叠的顺序。 为此，您可以为每个元素分配一个数字（z 索引）。该系统是数字较大的元素与数字较小的元素重叠。 答案来源
好的，我现在明白了，它组织元素，我们可以使用任何数字...更高的 z-index 数字出现在所有元素上..好的很好。
z-index 和 jquery< /a>..非常简单，非常好
...但我从答案中注意到它取决于位置属性，所以 -->...(google)..
z-index 之间的关系是什么和位置？
好的...所以 z-index 和位置是一对..必须是一起..
需要更多信息 ::
它会在浏览器（IE7，IE8，chrome，...等）中产生任何冲突吗？
z-index 有什么用途或者我们能做什么与 z-index（取决于标签）？
...等等？
如果我理解错误请纠正我...
提前致谢。
This property make me confuse.
well.. i searched in google:
What is the z-index?
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source
What is the z-index uses?
The order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source
Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.
z-index and jquery..very simple and very nice
...but i noticed from the answers that it depend on position property, so -->...(google)..
What is the relation between z-index and position?
Ok ... so z-index and position are couple..must be together..
need more information ::
dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?
What are the z-index uses or what can we do with z-index(depending on the Tags)?
...etc?
correct me if i understand wrong...
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
Z-index 是确定当两个 html 元素重叠时哪个 html 元素出现在另一个 html 元素之上的属性。基本思想是 z-index 最高的元素位于“顶部”。
默认情况下，元素的 z 索引为零，但将一个元素的 css 属性设置为 1，将另一个元素设置为 5 将使后一个元素位于前一个元素的“顶部”（如果它们重叠）。
到目前为止，很简单，但有几件事需要注意。
其一，正如另一个答案中已经提到的，z-index 仅在元素定位为绝对、固定或相对位置时才有效。 （即CSS属性“位置”）。未定位的元素的 z 索引为零。
使事情进一步复杂化（根据我的经验，这个领域经常不被理解）是堆叠上下文的概念。有关更多信息，请参阅此等文章。简而言之，每次显式设置新的 z 索引时，都会启动一个新的堆叠上下文。设置了 z-index 的元素的所有子元素现在都位于这个新的堆叠上下文中，该上下文可能位于另一个不相关元素上的堆叠上下文之上或之下。
这个堆叠上下文是什么意思？这意味着 z 索引为 100 的元素不一定位于 z 索引为 1 的元素之上。如果它们位于不同的堆栈上下文中，则只有堆栈上下文本身的 z 索引很重要。
Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".
By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.
So far, so simple, but there are several things to look out for.
One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.
To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.
What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.
我建议在 SmashingMagzine 上看看这个属性。
Z -索引 CSS 属性：全面了解
它通过精彩的示例和演示涵盖了该属性的所有具体细节。
I would suggest to have a look at this property on SmashingMagzine.
The Z-Index CSS Property: A Comprehensive Look
It covers all nuts and bolts of this property with great examples and demonstrations.
最重要的是要记住，z-index 仅在元素具有相对、绝对或固定位置时才起作用
the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed
我不完全确定你在问什么，但大多数情况下，如果你正在做复杂的样式，例如悬停工具提示或下拉导航，你只需要使用 z-index ，只是为了确保它们显示在其他页面内容上。
对于基本设计，您通常应该避免使用位置和 z-index 属性，因为您通常可以通过更好的性能和浏览器兼容性（仅使用浮动等）来实现相同的效果。Sarfraz
发布的 Smashing Magazine 链接是一篇关于该主题的优秀文章，如果您仍在努力了解该属性的功能，那么这是一个很好的参考点。
I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.
For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.
The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.