如何在 svg 之前也始终在前台获取导航栏？答案

【问题标题】：How to get nav bar always in foreground also before svg?如何在 svg 之前也始终在前台获取导航栏？
【发布时间】：2019-02-03 18:36:30
【问题描述】：

我的网站顶部有一个粘性导航栏。这个导航栏总是在前台，但是当我的 d3 图表出现时它在后台。

我不知道该尝试什么，因为我不知道从哪里开始。我在 div 中使用视图框 (svg)，如果屏幕发生变化，它总是会缩放。感谢您的帮助！

var svg = d3.select("div#mindmap")
    .append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 900 900")
    .classed("svg-content", true);

    nav {
        width: 100%;
        height: 50px;
        background: grey;
        border-top: 3pt ridge black;
        border-bottom: 3pt ridge black;
        position: sticky;
        top: 0;
    }
    
    nav ul {
        display: flex;
        margin: 0;
        padding: 0 100px;
        float: left;
    }
    
    nav ul li {
        list-style: none;
    }
    
    nav ul li a {
        display: block;
        color: #fff;
        padding: 0 20px;
        text-decoration: none;
        font-weight: bold;
        line-height: 50px;
    }
    
    nav ul li a:hover,
    nav ul li a.active {
        background: #61BA65;
    }

    .svg-container {
         display: inline-block;
         position: relative;
         width: 100%;
         padding-bottom: 100%;
         vertical-align: top;
         overflow: hidden;
    }

    .svg-content {
         display: inline-block;
         position: absolute;
         top: 0;
         left: 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<nav>
    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
    </ul>
</nav>
<div id="mindmap" class="svg-container"></div>

【问题讨论】：

标签： javascript html css d3.js foreground

【解决方案1】：

我将 z-index 放置在我的导航 css 中：

nav {
     z-index: 1;
     width: 100%;
     height: 50px;
     background: grey;
     border-top: 3pt ridge black;
     border-bottom: 3pt ridge black;
     position: sticky;
     top: 0;
}

【讨论】：

【解决方案2】：

z-index 就是为了这个。您可能希望使用更大的数字来确保没有其他应用了 z-index 的元素覆盖导航。

【讨论】：