尝试使用 CSS 三角形箭头覆盖 Google 地图答案

【问题标题】：Trying to overlay a Google Map with a CSS triangle arrow尝试使用 CSS 三角形箭头覆盖 Google 地图
【发布时间】：2016-03-24 02:51:43
【问题描述】：

我正在尝试在 Google 地图的顶部放置一个 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 看起来像这样，请注意我需要让我的 Google 地图做出响应式行为：

.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;
    }

所以我希望 z-index 能解决这个问题。

这是我的示例页面：http://ladbroke.hardingweb.net/google-map.html。你应该看到谷歌地图覆盖了我的箭头（我会将谷歌地图推到更高的生产版本）。

如果有任何想法或见解，我将不胜感激

非常感谢奈杰尔H

【问题讨论】：

标签： html css google-maps

【解决方案1】：

将属性position: relative 添加到您的箭头。为我解决了 Firefox 和 chrome 中的问题。

问候，希望它能解决问题。

【讨论】：