0
我有两个div，其中in为某些内容，而其他我想显示我家的地图。无法控制具有最小z-索引的div
我使用css shape-outside属性来对角地分割屏幕，这也很好。问题是地图div有z-index : -1和内容div有z-index:0当我尝试放大和缩小地图我无法做到这一点。
有人能指出这个错误吗？
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>
好感谢您的想法。它工作，但为什么当z-index在-ve时它不工作？ – Rehan
如果你只是为'＃q'指定'z-index：1'，并且'＃e'中的'z-index'，一个负Z指数的元素将在大多数元素下呈现，你的情况地图div在文档中的所有元素下呈现。 – azs06
好的。感谢芽:) – Rehan