【问题标题】:Div z index not working [closed]Div z索引不起作用[关闭]
【发布时间】:2013-09-07 16:50:26
【问题描述】:

我在主页上有一个弹出式咖啡幻灯片 - theCoffeeLocator.com(点击“优势”打开幻灯片。

打开时,幻灯片会以半透明的方式使网页的其余部分变暗。 我的顶部导航栏 div (id="topstrip") 不会位于变暗的 div (id="jdarken") 后面。

任何想法 谢谢

【问题讨论】:

  • 能把相关代码贴在这里吗?否则这个问题太本地化了——当你的页面被修复时,这个问题将变得毫无用处。

标签: css-float z-index transparent css-position


【解决方案1】:

#topstrip(z-index:995)位于#header(z-index:994)内#back

#jdarken (z-index: 996) 位于#contentarea (z-index: 1) 内 #back

由于994>1#header 的所有子代将被绘制在#contentarea 的所有子代之上。 #jdarken#topstrip 位于不同的堆叠上下文(由 DOM 树中的 z 索引节点分隔),它们的相对 z 索引无关紧要。

作为一种解决方案,我建议从 #contentarea 中删除 z-index。这会将#jdarken 放置到与#header 相同的堆栈上下文中,因此#jdarken 将堆栈在#header 之上(以及#topstrip 之上),因为996 > 994。如果我理解正确,#topstrip 的 z-index 也是未使用的,您可以删除该属性而不会产生任何后果。

同样,元素必须是positioned,z-index 才有意义(fixed 可以);但是,这里满足这个条件。

【讨论】:

  • 谢谢。从内容中删除了 z-index=1 并解决了。
【解决方案2】:

为了使 z-index 属性起作用,元素应具有相对、绝对或固定的位置属性。

当我检查你的源代码时,我注意到你的灰色元素位于其他一些元素中,z-index 行为受父母属性的影响,

尝试将您的 id="jdarken" div 重新定位到页面底部,然后尝试。

【讨论】:

  • position: fixed 也可以。
  • 谢谢,我忘了提,答案已编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-04
  • 1970-01-01
  • 1970-01-01
  • 2021-09-19
  • 1970-01-01
相关资源
最近更新 更多