Question

我试图在页面顶部放置一个渐变，以便从导航栏平滑过渡到页面正文中的地图;侧导航和顶部导航都覆盖了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>

这是指向codepen的链接：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索引和DOM放置，但渐变覆盖文本

1 个答案: