Как я могу исправить эту ошибку iframe с заголовком

Question

РЕДАКТИРОВАТЬ: я исправил это сам!Если у вас возникла такая же проблема, выполните следующие действия:

от

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

до

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

Я делаю адаптивный дизайн сайта.Я использую bootstrap 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;
}