嘗試覆蓋一個CSS三角形的Google地圖箭頭

Question

我試圖在CSS地圖上放置一個CSS箭頭。這實際上是一個設計功能，我有一個橫條紋，沿着條紋的一半是一個向下箭頭，我想向下箭頭覆蓋Google地圖。

我的HTML看起來像這樣：

<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> 

我的CSS是這樣的，請注意，我需要讓我的谷歌地圖的行爲響應：

​​3210

所以我希望Z-索引會對此進行分類。

這是我的示例頁面：http://ladbroke.hardingweb.net/google-map.html。你應該看到谷歌地圖覆蓋了我的箭頭（我將推動谷歌地圖更高的生產版本）。

我真的很感激的任何思想或見解

非常感謝 奈傑爾^ h

Answer 1

財產position: relative添加到您的箭頭。爲我解決了firefox和chrome的情況。

問候，希望它解決了這個問題。