尽管有自定义 z-indexes 和 DOM 放置，但渐变覆盖文本

Question

我试图在页面顶部放置一个渐变，以便从导航栏平滑过渡到页面 body 中的地图；侧面导航和顶部导航都覆盖了 z-index: 2 没问题（地图为 0，渐变为 1）。但是，当我尝试将页面标题和工具栏移到渐变上时，没有任何反应。我尝试了 z-indexes 以及移动标题标记以将其放在 DOM 中的渐变之前，但是这些操作或它们的组合都没有解决问题。知道这里发生了什么吗？

有问题的两个元素的 html 标记现在如下所示：

<div class="page-head container">
  <h1 class="page-title" id="map-title">Drivers</h1>
  <div class="btn-group tools" role="group" aria-label="Choose view type">
    <button type="button" class="btn btn-secondary" aria-label="Map"><i class="icon-asset-5"></i></button>
    <button type="button" class="btn btn-secondary" aria-label="Table"><a class="unlink-light" href="tables.html"><i class="icon-table"></i></a></button>
    <button type="button" class="btn btn-secondary" aria-label="List"><i class="icon-th-list"></i></button>
  </div>
</div>
<div class="top-gradient"></div>

这是代码笔的 link：https://codepen.io/redheadedmandy/pen/yEOrMQ

Answer 1

您需要将 position: value 添加到 css 并删除 !important:

nav {
z-index: 2;
position: relative;
}

#sidebar {
z-index: 2;
position: relative;
}

h1 {
z-index: 100;
position: relative;
}
#page-head {
z-index: 100;
position: relative;
}

尽管有自定义 z-indexes 和 DOM 放置，但渐变覆盖文本

Gradient overlays text despite custom z-indexes and DOM placement

html

css

gradient

z-index

bootstrap-4