0
私は2つのdivを持っていますが、inはいくつかのコンテンツ用であり、その他は私の家の地図を表示したいものです。最小のZ-インデックスを持つdivを制御することができません
私はCSS shape-outsideプロパティを使って画面を斜めに分割していますが、これも正常に動作します。問題は地図divがz-index : -1、コンテンツのdivがz-index:0の場合です。マップをズームインしてズームアウトしようとすると、私はそうすることができません。
誰かが間違いを指摘できますか？代わりに#q上z-index: -1とz-index: 0使用z-index: 2の
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-index'が負の要素はほとんどの要素の下でレンダリングされますドキュメント内のすべての要素の下でレンダリングされる状況マップdiv。 – azs06
ありがとう芽:) – Rehan