[英]Not able to control the div which has the least z-index
我有兩個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>
在#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，輸出
一個div標簽具有z-index：2如何更改子div標簽z-index：3
[英]one div tag has z-index:2 how to change sub div tag z-index:3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.