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

Question

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

来自

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

到

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

我正在做响应式网站设计。我使用 bootstrap 4。因此，我有导航菜单，并且在一个部分中有 iframe 和 img 标签。当我将页面滚动到底部时，iframe 显示在标题上。标题是粘性的，所以这就是为什么 iframe 应该在标题下的原因。我现在给你看一张动图... 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;
}