主页 / 问题 / 1138546
Accepted
Rivand
Asked:2020-06-09 15:01:16 +0000 UTC2020-06-09 15:01:16 +0000 UTC

布局网页时，带有开放街道地图的框架会覆盖页面的所有其他元素

  • 772

最近开始学习网络编程，现在开始使用地图。我创建了一个框架，在其中插入了开放的街道地图。我将它拉伸到全屏（我计划将半透明的 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%;
}
html

1 个回答

  1. Best Answer

    标头有一个 z-index，但位置：静态。放置相对，绝对或固定，然后它会起作用。http://htmlbook.ru/css/z-index

    • 1

相关问题