个人中心
gpt4 book ai didi

javascript - 无法控制 z-index 最小的 div

转载 作者：行者123 更新时间：2023-11-28 04:35:50 25 4
gpt4 key购买 nike

我有两个 div，其中用于一些内容，其他我想显示我家的 map 。

我使用CSS shape-outside属性对 Angular 分割屏幕，这也可以正常工作。问题是当我尝试放大和缩小 map 时， map div 具有 z-index : -1 ，而内容 div 具有 z-index:0 map 我无法这样做。

谁能指出错误吗？ 

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>

最佳答案

在 #q 上使用 z-index: 2，而不是 z-index: -1 和 z-index: 0 并且您可以从 #e 中保留 z-index。 

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 https://jsbin.com/fucanec/edit?html,output

关于javascript - 无法控制 z-index 最小的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44218225/

25 4 0
文章推荐： c++ - 为什么 `std::align_val_t`要限制隐式转换？
文章推荐： c# - 使用 ffmpeg 时如何提高图像导出/提取速度？
文章推荐： c++ - 将矩阵附加到 STL 矩阵(2d std::vector)
文章推荐： javascript - 如何创建 jQuery 函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com