Search code examples
javascripthtmlcssgoogle-mapsz-index

Not able to control the div which has the least z-index

I have two div in which in is for some content and other I want to show the map of my home.

I use css shape-outsideproperty to split the screen diagonally which also works fine. The problem is the maps div is having z-index : -1 and the content div which has the z-index:0 when I try to zoom in and zoom out the map I am not able to do so.

Can Someone point out the mistake? 

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('e'), {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
}
body {
  /*background-color: grey;*/
}

#q {
  background-color: #EC9592;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 0;
  -webkit-clip-path: polygon(75% 0, 0 75%, 0 0);
  clip-path: polygon(75% 0, 0 75%, 0 0);
}

#q::before {
  content: "";
  float: right;
  height: 100%;
  width: 100%;
  -webkit-shape-outside: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%);
  shape-outside: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%);
}

#e {
  background-color: #D08B88;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#e {
  width: 100%;
  height: 100%;
}
<html>

<head>
  <title>Testing Split Div</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3TtNWWpFpdGV7z0gWnd7-ml0weTLrtGI&callback=initMap" async defer></script>


  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col" id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
          tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
          Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes
          te est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. </div>

        <div class="col" id="e"> </div>
      </div>
    </div>
  </body>

</html>

Solution

  • Instead of z-index: -1 and z-index: 0 use z-index: 2 on #q and you can leave z-index from #e. 

    var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('e'), {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
}
    body {
  /*background-color: grey;*/
}

#q {
  background-color: #EC9592;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
  -webkit-clip-path: polygon(75% 0, 0 75%, 0 0);
  clip-path: polygon(75% 0, 0 75%, 0 0);
}

#q::before {
  content: "";
  float: right;
  height: 100%;
  width: 100%;
  -webkit-shape-outside: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%);
  shape-outside: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%);
}

#e {
  background-color: #D08B88;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#e {
  width: 100%;
  height: 100%;
}
    <html>

<head>
  <title>Testing Split Div</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3TtNWWpFpdGV7z0gWnd7-ml0weTLrtGI&callback=initMap" async defer></script>


  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col" id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
          tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
          Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes
          te est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. </div>

        <div class="col" id="e"> </div>
      </div>
    </div>
  </body>

</html>

    Jsbin of the above code https://jsbin.com/fucanec/edit?html,output