Question

我有两个div，其中有一些内容和其他我想要显示我家的地图。

我使用css shape-outside属性对角分割屏幕，这也很好用。问题是地图div有z-index : -1而内容div有z-index:0当我尝试放大并缩小地图时我无法这样做。

有人可以指出错误吗？

＆＃13;

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
  });
}

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

而不是z-index: -1和z-index: 0在[{1}}上使用z-index: 2而您可以从#q离开z-index。

＆＃13;

#e

＆＃13;

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
  });
}

＆＃13;

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%;
}

＆＃13;

以上代码https://jsbin.com/fucanec/edit?html,output

的Jsbin

无法控制具有最小z-index的div

1 个答案: