Google映射CSS问题

Question

I had a googlemaps map covering my whole page and i wanted a cool menu showing up above the map. So i found this tutorial http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/ about a cool menu. My problem is that no the menu looks good and works as it should but somehow my maps is gone behind all this. It doesn't respond to z-index it is still behind everything. And it is not covering my whole screen anymore.

Here is my googlemap:

  <script>
function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

<div id="map-canvas"></div>

And here is the css for the map:

        #map-canvas {
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     overflow:hidden;
     z-index:-1;
 }

here is the menu html and js:

    <div class="component">
<!-- Start Nav Structure -->
<button class="cn-button" id="cn-button">-</button>
<div class="cn-wrapper opened-nav" id="cn-wrapper">
    <ul>
        <li><a href="#"><span class="icon-picture"></span></a></li>
        <li><a href="#"><span class="icon-headphones"></span></a></li>
        <li><a href="#"><span class="icon-home"></span></a></li>
        <li><a href="#"><span class="icon-facetime-video"></span></a></li>
        <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
    </ul>
</div>
<div id="cn-overlay" class="cn-overlay on-overlay"></div>
<!-- End Nav Structure -->

    (function () {

    var button = document.getElementById('cn-button'),
        wrapper = document.getElementById('cn-wrapper'),
        overlay = document.getElementById('cn-overlay');

    //open and close menu when the button is clicked
    var open = false;
    button.addEventListener('click', handler, false);
    button.addEventListener('focus', handler, false);
    wrapper.addEventListener('click', cnhandle, false);

    function cnhandle(e) {
        e.stopPropagation();
    }

    function handler(e) {
        if (!e) var e = window.event;
        e.stopPropagation();//so that it doesn't trigger click event on document

        if (!open) {
            openNav();
        }
        else {
            closeNav();
        }
    }
    function openNav() {
        open = true;
        button.innerHTML = "-";
        classie.add(overlay, 'on-overlay');
        classie.add(wrapper, 'opened-nav');
    }
    function closeNav() {
        open = false;
        button.innerHTML = "+";
        classie.remove(overlay, 'on-overlay');
        classie.remove(wrapper, 'opened-nav');
    }
    document.addEventListener('click', closeNav);

})();

How can i find out what is blocking the maps from creating as it should?

Answer 1

Try the following:

html, body  {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.mapContainer  {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
#map-canvas  {
    min-height: 100%;
    height: 100%;
    min-width: 100%;
    width: 100%;
}
.component  {
    position: relative;
    z-index: 99;
}