wie man reaktionsschnelles Hamburgermenü erhält, um Inhalt nicht niederzudrücken

Question

Ich habe dieses reaktionsfähige Hamburgernav, das zurzeit den Inhalt darunter drückt. Gibt es eine Möglichkeit, es stattdessen über den Inhalt zu bewegen? Ich habe so viele Dinge ausprobiert, nichts, was ich tue, funktioniert, aber ich bin kein Experte. Jede Hilfe wird sehr geschätzt! Vielen Dank!

jsfiddle here

<nav class="header"> 
     <input class="menu-btn" type="checkbox" id="menu-btn" /> 
     <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
     <ul class="menu"> 
     <li><a href="#work">Our Work</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#careers">Careers</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
<figure id="main-img"></figure> 

figure#main-img { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    z-index: 10; 
    height: 200px; 
    background-color: red; 
} 
nav.header { 
    background-color: silver; 
    width: 100%; 
    float: left; 
    overflow: hidden; 
} 
.table { 
    display: table; 
    margin: 0 auto; 
} 
.header ul { 
    list-style: none; 
    position: relative; 
    float: left; 
    display: block; 
    left: 50%; 
    max-width: 1200px; 
    margin: 0; 
    padding: 0; 
} 
.header ul li { 
    position: relative; 
    right: 50%; 
    /*float: left; 
    display: inline-block;*/ 
} 
.header li a { 
    display: block; 
    padding: 1em; 
    text-decoration: none; 
    color: #000000; 
} 
.header li a:hover { 
    background-color: #B5B5B5; 
} 
.header .menu { 
    clear: both; 
    max-height: 0; 
    transition: max-height .2s ease-out; 
} 
.header .menu-icon { 
    cursor: pointer; 
    display: inline-block; 
    float: right; 
    padding: 28px 20px; 
    position: relative; 
    user-select: none; 
} 
.header .menu-icon .navicon { 
    background: #333; 
    display: block; 
    height: 2px; 
    position: relative; 
    transition: background .2s ease-out; 
    width: 18px; 
} 
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after { 
    background: #333; 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    transition: all .2s ease-out; 
    width: 100%; 
} 
.header .menu-icon .navicon:before { 
    top: 5px; 
} 
.header .menu-icon .navicon:after { 
    top: -5px; 
} 
.header .menu-btn { 
    display: none; 
} 
.header .menu-btn:checked ~ .menu { 
    max-height: 240px; 
} 
.header .menu-btn:checked ~ .menu-icon .navicon { 
    background: transparent; 
} 
.header .menu-btn:checked ~ .menu-icon .navicon:before { 
    transform: rotate(-45deg); 
} 
.header .menu-btn:checked ~ .menu-icon .navicon:after { 
    transform: rotate(45deg); 
} 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 
    top: 0; 
} 

@media only screen and (min-width: 750px) { 
.header li { 
    float: left; 
} 
.header li a { 
    padding: 20px 30px; 
} 
.header .menu { 
    clear: none; 
    /*float: right;*/ 
    max-height: none; 
} 
.header .menu-icon { 
    display: none; 
} 
} 

@media only screen and (max-width: 750px) { 
.header li a { 

    background-color: Silver; 
    opacity: 0.9; 
} 
.header ul li { 
    border-bottom: 1px solid #000000; 
    color: #000; 
} 
.header ul li:first-child { 
    border-top: 0px solid #000000; 
} 
.header ul { 
    width: 100%; 

} 
} 
@media only screen and (max-width: 480px) { 
nav.header { 

} 
} 

Answer 1

-Code (nur die relevanten CSS, die HTML nicht ändern) aus dem JSFiddle falls es nicht mehr funktioniert:

body { 
    width:100%; 
    margin:0; 
} 

figure#main-img { 
    width: 100%; 
    position: relative; 
    float:left; 
    overflow: hidden; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    height: 300px; 
    background-color: red; 
    margin:58px 0 0 0; 
} 

nav.header { 
    background-color: silver; 
    opacity: 0.75; 
    position: absolute; 
    width: 100%; 
    top:0; 
    z-index:10; 
    float: left; 
    margin:0; 
    overflow:hidden; 
} 
.header .menu-icon { 
    padding: 28px 20px; 
} 

---

hier ist ein JSFiddle können Sie arbeiten mit.

nav.header { 
    background-color: silver; 
    position: absolute; 
    width: 100%; 
    top:0; 
    z-index:10; 
    float: left; 
    margin:0; 
    overflow:hidden; 
} 

Hier können Sie sehen, dass ich die Position absolut sein gesetzt, setzen Sie es an die Spitze und dann z-Index ist eine größere Zahl als die Standardeinstellung.

Hoffe, es half, Andrew