Geek Answers Handbook

Is it possible to put an element on top of another without blocking references to inverse elements?

I'm not sure how to approach this problem, I can come up with a solution in which I reduce the width of the top element so as not to close the link, but I want to see if this is possible without it.

Problem. Place the navigation bar on top of the top of the Google Maps map without blocking the Map and Satellite links.

figure1

EDIT: Example here http://www.lobagola.com/contacts.html

I wonder how they achieved this, you can still click on maps and satellite links even with an item on top of it.

+4
source share
4 answers

Consider CSS pointer-events: none

none
; -, -, - . / / .

function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
   
 #map-canvas {
        width: 100%;
        height: 200px;
      }
#nav{
  color: #FFF;
  pointer-events: none; /* disabled mouse interaction */
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  margin-left:12px;
  }

#nav ul li{
  display:inline;
  margin-left:10px;
  }
#nav ul a{
  text-decoration:none;
   pointer-events: auto; /* re-enable mouse interaction for links */
  }
<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>
Hide result
+5

position:relative z-index, position:absolute /, .

: , z- .

.link {
  float: right;
  position:relative;
  z-index:10;
}

.page-header {
  width: 400px;
  height: 50px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  margin: 0;
}

[1], [2]

[1] http://jsbin.com/nawuva/1/edit

[2] http://jsbin.com/nawuva/2/edit

-1

. , bump z-index

$('.gmnoprint').css({z-index : 10});
-1

More articles:


All Articles