html - 未应用 Z-Index

标签 html css z-index

<分区>


关闭 9 年前

  • 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist
  • 关于您编写​​的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

我试图让一个 slider 从我的页面顶部下拉以越过我的菜单,但不能。

我已经应用了一个 position: relative 到他们两个,并试图将菜单的 z-index 设置为 0 或 -10,但我已经将 slider 设置为 z-index: 10000 和 position: relative 但它是仍在菜单后面。

页面在http://www.tassolarpanels.com.au/有问题的 slider 是屏幕右上角的蓝色“获取快速报价”按钮。当您按下它时您会看到 - 它位于我的菜单后面。

如果有人知道我做错了什么,我将非常感谢您的帮助!

最佳答案

您需要确保父元素(在本例中为 #sliding-panel-container)应用了正确的 z-index,但目前没有——它被列为z-index: 1 这就是它显示在列为 z-index: 2 的导航后面的原因。

试试这个:

#sliding-panel-container {
    ... /* Whatever your other CSS is here */
    z-index: 3;
}

关于html - 未应用 Z-Index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19667072/

上一篇:具有流畅三列布局的 css 图像悬停动画

下一篇:html - CSS - 摆脱初始设置列表导航

相关文章:

html - 为同一页面上的多个表格格式化 CSS 样式

html - 带边框的定位标志

javascript - 无法将 mousedown 事件附加到嵌入元素

html - 如何在标题中添加自定义标签以使 WordPress 中的字体变大?

Javascript 所见即所得逻辑

html - z-index 顺序问题

jquery - 如何使用 jQuery 在悬停时设置 z-index?

android - 在 Android 浏览器中仅使用 HTML 和 CSS 的上拉工具栏

javascript - 将 7 张图像合并为一张,一张叠加在一起并输出为单张图像?

javascript - 为什么我的 CSS 和 Bootstrap.css 样式没有应用?