При вёрстке web страницы фрейм с картой open street map закрывает собой все другие элементы страницы

Question

Недавно начал изучать web-программирование и сейчас приступил к работе с картами. Создал фрейм, в который вставил карту open street map. Растянул её на весь экран (планировал что полупрозрачный UI будет поверх карты), но этот фрейм полностью закрывает собой все остальные элементы. Работа с z-index не чего не даёт. Как мне что-то отобразить поверх этого фрейма с картой?

html:

<body>
    <header>
        <nav class="top-nav-panel">
            <ul>
                <li>
                    <form asp-action="MainPanelWithStatus" method="get">
                        <button><b>Состояние</b></button>
                    </form>
                <li>
                    <form asp-action="MainPanelWithServerData" method="get">
                        <button><b>Данные</b></button>
                    </form>

                <li>
                    <form asp-action="BsBoard" method="get">
                        <button><b>---</b></button>
                    </form>
                <li>
                    <form asp-action="MainPanelWithEpdBoard" method="get">
                        <button><b>Устройства</b></button>
                    </form>
                <li>
                    <form asp-action="MainPanelWithMap" method="get">
                        <button><b>Карта</b></button>
                    </form>
                <li>
                    <form asp-action="MainPanelWithStatistics" method="get">
                        <button><b>Статистика</b></button>
                    </form>
                <li>
                    <form asp-action="MainPanelWithSettings" method="get">
                        <button><b>Настройки</b></button>
                    </form>
                <li>
                    <form asp-action="Index" method="get">
                        <button><b>Выйти</b></button>
                    </form>
            </ul>
        </nav>
    </header>
    <main>
        <iframe class="map-frame" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=60.608096122741706%2C56.805413212593955%2C60.64393043518067%2C56.8157850280173&amp;layer=mapnik"></iframe>
    </main>
</body>
</html>

css:

:root {
    text-align: center;
    font-family: 'PT Serif', serif;
}

body {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: silver;
}
/* -------------- header --------------*/
header {
    margin: 0;
    padding: 0;
    height: 0;
    z-index: 100;
}

nav.top-nav-panel {
    margin: 0;
    padding: 0;
}

    nav.top-nav-panel ul {
        list-style-type: none;
        list-style-position: inside;
        height: 4vmin;
        margin: 0;
        padding: 0;
        border: 0;
    }

        nav.top-nav-panel ul li {
            display: inline-block;
            margin: 0 0 0 -1.4vw;
            padding: 0;
            border: 0;
            height: 100%;
            width: 11.7vw;
        }

            nav.top-nav-panel ul li form {
                height: 100%;
            }

                nav.top-nav-panel ul li form button {
                    font-family: 'PT Serif', serif;
                    text-shadow: 1px 1px 4px #e1e1e1;
                    /*background-color: #4188D2;*/
                    background-image: linear-gradient(45deg, #ffffff 0%,#e1e1e1 28%,#f1f1f1 43%,#e1e1e1 64%,#e1e1e1 64%,#e1e1e1 82%,#f6f6f6 100%);
                    color: black;
                    font-weight: 800;
                    font-size: 1.0vw;
                    margin: 0 0 0.1vw 0;
                    padding: 0;
                    width: 11.7vw;
                    height: 100%;
                }

            nav.top-nav-panel ul li:first-child form button {
                border-radius: 0px 0px 0px 30px;
            }

            nav.top-nav-panel ul li:last-child form button {
                border-radius: 0px 0px 30px 0px;
            }
/* -------------- map --------------*/

iframe.map-frame {
    z-index: -1;
    width: 100%;
    height: 100%;
}

Answer 1

У header хоть и стоит z-index, но position: static. Поставьте relative, absolute или fixed, тогда заработает. http://htmlbook.ru/css/z-index

БЛОГ НА HUSL

При вёрстке web страницы фрейм с картой open street map закрывает собой все другие элементы страницы

html:

css:

Ответы (1 шт):