Как получить навигационную панель всегда на переднем плане и перед SVG? - PullRequest
Новая
       14

Как получить навигационную панель всегда на переднем плане и перед SVG?

0 голосов
/ 03 февраля 2019

У меня есть липкая панель навигации в верхней части моего сайта.Эта навигационная панель всегда находится на переднем плане, но на заднем плане, когда появляется мой график d3.

Я понятия не имею, что попробовать, потому что я не знаю, с чего начать.Я использую viewbox (svg) внутри div, который всегда масштабируется, если экран будет изменен.Спасибо за помощь! 

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>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Z-индекс для этого.Возможно, вы захотите использовать большее число, чтобы убедиться, что никакой другой элемент с примененным z-index не покрывает nav.

0 голосов
/ 03 февраля 2019

Я поместил 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;
}
...