Question

我正在尝试通过chardinjs向我的网站添加一些叠加指令。我有一个带图像的固定导航栏。我希望覆盖图看起来像chardinjs页面上的样子。这是我的HTML：

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container navbar-container">
        <a class="brand" href="/web/Home"><img src="assets/header-logo2.gif" data-intro="Click logo to return to main portal" data-position="bottom" class=" chardinjs-show-element chardinjs-relative-position"></a>
      </div>
    </div>
  </div>

此站点使用Bootstrap构建，因此所有类都与基本Bootstrap内联。我的导航栏固定在页面顶部，position: fixed，z-index为1030。 navbar-inner，container和brand没有列出的z-index或位置。 img有position: relative和z-indez: 9999999。使图像显示在叠加层上方的唯一方法是将导航栏设置为position: relative并删除z-index。我不希望我的导航栏移动，但更重要的是，我想知道为什么。任何帮助这个问题都会很棒。

Answer 1

请参阅此答案：z-index not working with fixed positioning

“z-index仅适用于特定情境，即相对，固定或绝对位置。

相对div的z-index与绝对或固定div的z-index无关。“ @ cusimar9

Z-index不适用于固定位置

1 个答案: