html - 移动 View 的顶部横幅未全宽呈现

Question

我制作了一个顶部横幅，它在网页上以全宽呈现，但是当我尝试在移动 View 中查看它时，顶部横幅被尖叫了一定比例。

写的html代码是这样的:

<style>

    .top-banner {
        width: 100%;
        display: block;
        text-align: center;
        background: #fee768;
        color: #555;
        font-size: 16px;
        padding: 10px 7px;
        font-weight: 600;
    }

    .top-banner:hover {
        text-decoration: none;
        background: #ffc71f;
        color: #846934;
    }
</style>

<div>
    <a href="https://www.youtube.com/...." target="_blank" class="top-banner">
        Need help? Watch this Video
    </a>
</div>

这在网页上运行良好，但当我在移动设备上查看同一页面时，顶部横幅不会以全宽呈现。

我尝试将 position: fixed !important; 添加到 .top-banner CSS 类中，使用此方法宽度固定但页面底部内容移动向上，即网页的底部内容越过顶部横幅。

请给我一些解决这个问题的方法。

Answer 1

如果您不希望其他元素出现在您的顶部横幅上方，您可以使用

.top-banner {
  z-index:1000
}

z-index 的值越高，元素出现在其他元素之上的次数就越多。