Question

无论你在哪里滚动，我都试图让菜单贴在页面顶部，但我无法这样做。这是我的代码：

body#beta a#beta,
body#zte a#zte,
body#honor a#honor,
body#samsung a#samsung,
body#market a#market,
body#beta a#beta,
active {
    background-color: #0D47A1;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
active {
    background-color: #0D47A1;
}
.active li {
    background: #fff;
}
ul a,.dropbtn {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
ul.dropdown {
    display: inline-block;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: fixed;
    top: 40px;
    background-color: #fff;
    min-width: 120px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
    <ul class="dropdown">
        <a href="#" class="dropbtn">Progam 1</a>
        <div class="dropdown-content">
             <ul class="active" id=menu position=fixed>
             <li><a href=""  style="color:black;  " id=home>Home Page</a></li>
             <li><a href=""  style="color:black; " id=zte>ZTE</a></li>
             <li><a href=""  style="color:black; " id=honor>Honor</a></li>
             <li><a href=""  style="color:black; " id=samsung>Samsung</a></li>
             <li><a href="" style="color:black; " id=market>Newsletter</a></li>
        </div>
    </ul>
    <ul class="dropdown">
        <li class="active"><a href="#" class="dropbtn">Progam 2 BETA</a></li>
        <div class="dropdown-content">
            <ul class="active" id=menu position=fixed>
                <li><a href=""      style="color:black;  " id=beta> Progam 2 Home Page</a></li>

        </div>
    </ul>
</ul>

我已经尝试过了

position:fixed;

和

top:0px;

但它只会变成乱七八糟的混乱。

任何人都可以帮我弄清楚如何将整个菜单修复到顶部吗？

Answer 1

position:fixed;
top:0;

就是你所需要的。

这会将元素置于正常的内容流之外，并将其置于视口的顶部，无论您在内容中滚动的位置如何（默认情况下）视口是浏览器窗口 - 但它可以是父iframe或任何具有一些选择3d变换的父元素。）您必须确保body元素没有任何边距（body{margin:0;}会处理这个边距）。

您的问题是您没有正常的内容流（至少在此示例中）。

要添加的另一个相当重要的事情是IoS设备会忽略position:fixed;并将其替换为position:absolute;。 ~~显然，他们认为position:fixed;是对在线安全的责任（需要引证）~~。这是一个糟糕的设计决定，但它是如何做的。无论如何，为了让你的元素保持＆＃34;固定＆＃34;在IoS上，你需要确保它没有一个具有设定位置的父级（static除外），这首先击败了使用position:fixed的全部目的。
是的，我知道。跟苹果说说。

注意：在某些较新版本的IoS中，position:fixed;属性仅在特殊状态下被忽略，例如键盘打开时。

将级联css菜单修复到顶部

1 个答案: