z 索引问题
我正在尝试使用 z-index 对按钮和 div 进行分层。该按钮出现在 div 后面,而根据 z-index 它应该位于 div 前面。这是与按钮相关的样式元素Firebug 捕获的 div:
请注意,按钮的 z 索引为 2,div 的 z 索引为 1,并且两者都是position:relative。
完整的 HTML 位于 此 Pastebin 中。
I'm trying to use z-index to layer a button and a div. The button appears behind the div, while according to z-index it should be in front of it. Here is the style elements associated with the button & div as captured by Firebug:
Note that the button has a z-index of 2, the div has a z-index of 1, and both are position:relative.
Full HTML is in this pastebin.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
z-index 是相对值,而不是绝对值。
z-index 为 100 亿的对象不会出现在页面上所有元素的顶部,只会出现在同一堆栈上下文中的其他元素的顶部
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
在您发布的 CSS 层次结构中,看起来包含按钮和 div位于不同的元素(
#note18
和#note19
)中,因此您必须确保这些元素不会创建不同的堆叠上下文,这会导致任何 z 索引因为它们内部的元素彼此无关。z-index is a relative, not an absolute value.
An object with z-index 10 billion will not appear on top of all elements on the page, only on top of other elements in the same stacking context
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
In the CSS hierarchy you posted, it looks like the button and div are contained in different elements (
#note18
and#note19
), so you'll have to make sure that those elements aren't creating different stacking contexts which will make any z-indexes for elements inside them irrelevant to each other.