我怎么能用标题修复这个 iframe 错误

Question

编辑：我自己修好了！如果您遇到同样的问题，请按照以下步骤操作：

来自

nav {
position: fixed;
width: 100%;
}

到

nav {
position: fixed;
width: 100%;
z-index: 10;
}

我正在做响应式网站设计。我使用引导程序 4。所以，我有导航菜单，并且在一个部分中有 iframe 和 img 标签。当我将页面滚动到底部时，iframe 会显示在标题上。标题是粘性的，所以这就是 iframe 应该位于标题下方的原因。我现在给你看一个 gif...https://i.imgur.com/4ZMCTsN.gifv 随意询问更多css/html代码部分，我会告诉你的。

我尝试将标题（导航菜单）的 z-index 设置为尽可能高，并将导航菜单的显示标签更改为阻止，但这只会破坏一切。

<style>
/* the entire header thing is in external .css file, I just put this here 
to show you guys */
nav {
position: fixed;
width: 100%;
}
</style> 

                    <div id="tab1" class="tab-pane active">
                        <h4><i class="fas fa-map-marker-alt"></i>&nbsp;Our Location <small>More like our favourite surf spot</small></h4>

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6048.676068967504!2d-73.96889056972904!3d40.710574467186305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25bd9abcea3c7%3A0x34a2832eedb859d8!2sGiando+on+the+Water!5e0!3m2!1sfi!2sfi!4v1550400186363" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>  
                    </div>

Answer 1

我想通了！如果其他人有同样的问题，请更改它...

来自

nav {
position: fixed;
width: 100%;
}

到

nav {
position: fixed;
width: 100%;
z-index: 10;
}