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