0
J'ai deux div dans lequel est pour un contenu et d'autres, je veux montrer la carte de ma maison.Pas en mesure de contrôler la div qui a le moins z-index
J'utilise la propriété css shape-outside pour diviser l'écran en diagonale, ce qui fonctionne également très bien. Le problème est que les cartes div ont z-index : -1 et le contenu div qui a le z-index:0 quand j'essaie de zoomer et dézoomer la carte je ne suis pas capable de le faire.
Quelqu'un peut-il signaler l'erreur?
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>
merci bien pour l'idée. Cela a fonctionné, mais pourquoi ça ne marche pas quand l'index z est en -ve? – Rehan
cela fonctionnerait également si vous juste 'z-index: 1' pour' # q', et en laissant 'z-index' de' # e', un élément avec 'z-index' négatif rendra sous la plupart des éléments, dans votre carte de situation div est rendue sous tous les éléments du document. – azs06
Très bien. Merci bud :) – Rehan