2016-03-23 6 views
1

Googleマップの上にCSSの矢印を配置しようとしています。これは本当にデザイン機能です、私は水平ストライプを持って、ストライプに沿って半分の矢印は下向きの矢印であり、私はGoogleマップをオーバーレイするために下向きの矢印が欲しいです。GoogleマップをCSSの三角形の矢印でオーバーレイしようとしています

私のHTMLは次のようになります。だから私はZ-ことを期待していた

​​3210

を:

<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は次のようになり、私は私のGoogleマップが応答振る舞う持っている必要があることに注意してくださいインデックスはこれを整理するでしょう。

私の例のページはhttp://ladbroke.hardingweb.net/google-map.htmlです。あなたは、Googleマップが私の矢印をオーバーレイすることを知るべきです(私はプロダクションバージョンのためにGoogleマップを上に押します)。

は、私は本当にあなたの矢印にプロパティposition: relativeを追加任意の考えや洞察

感謝 ナイジェル・H

答えて

0

をいただければと思います。私のためにfirefoxとchromeのケースを解決しました。

よろしくお願いいたします。

関連する問題