Ich versuche, einen CSS-Pfeil über dem oberen Rand einer Google-Karte zu platzieren. Dies ist wirklich ein Design-Feature, ich habe einen horizontalen Streifen, auf halbem Weg entlang des Streifens ist ein Pfeil nach unten und ich möchte, dass der Pfeil nach unten die Google-Karte überlagert.Versuchen, eine Google Map mit einem CSS-Dreieck zu überlagern Pfeil
Mein HTML sieht wie folgt aus:
<div class="blue-stripe text-center">
<h1>how to find us</h1>
</div>
<div class="arrow-down"></div>
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.126971437045!2d-0.20244674881875546!3d51.51088651816963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760fe34117c0f5%3A0x5e396333c672dd3d!2s43+Ladbroke+Square%2C+London+W11!5e0!3m2!1sen!2suk!4v1458754616197" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Meine CSS sieht wie folgt aus, bitte beachten Sie, dass ich brauche, um meine Google-Karte in Reaktion darauf verhalten:
.blue-stripe {
width: 100%;
background: #223b74;
height: 35px;
margin: 0 auto;
}
.blue-stripe h1 {
color: #fff;
text-align: center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #223b74;
margin-left: 48%;
z-index: 5000;
}
.google-map {
position: relative;
padding-bottom: 20%; // This is the aspect ratio
height: 0;
overflow: hidden;
margin: 0 auto;
margin-top: -10px;
z-index: 0 !important;
}
.google-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
So gehofft, ich wurde, dass z- Index würde das aussortieren.
Hier ist meine Beispielseite: http://ladbroke.hardingweb.net/google-map.html. Sie sollten sehen, dass die Google Map meinen Pfeil überlagert (ich werde die Google Karte für die Produktionsversion höher schieben).
Ich würde wirklich keine Gedanken oder Erkenntnisse schätzen
Vielen Dank Nigel H