Question

我一直在玩CSS而且我遇到了一个非常糟糕的问题 - 位置：已修复。问题是我正在编辑wordpress模板，因为众所周知，有一个位置管理栏：固定在每个模板中。我试图在管理栏下方添加另一个栏，如菜单，但它总是不会直接显示在管理栏下方，而是在它下面大约50px。菜单是固定的，但不在我希望它显示的确切位置。

我无法将菜单栏放置在属性top：28px中，因为admin只对注册用户可见，因此对于guest虚拟机，菜单仍然会在不可见对象下方浮动28px。至于注册，它会没事的，但正如我所说，不是为了客人。

粘贴管理栏和菜单的代码，也许有人可能会发现问题......

#headerbar {
    min-width: 100%;
    height: 55px;
    background-color: rgb(0, 166, 81);
    z-index: 999999;
    position:fixed;
} 

#wpadminbar {
    direction: ltr;
    color: rgb(204, 204, 204);
    font: 13px/28px sans-serif;
    height: 28px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    min-width: 600px;
    z-index: 9999;
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}

如果这还不足以发现问题，我可以发布正文CSS（如果只需要？）。

Answer 1

您可以为登录和未登录的用户设置不同的顶部位置。比如，给你的标题栏默认的顶部位置为0，当用户登录并且有一个管理员时，给它一个额外的“with-admin-bar”类，它将顶部位置设置为28px左右。

编辑：实际上，这是更正确和更干净的解决方案：

CSS：

.bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%
}

.admin-bar {
    height: 50px;
    background: red;
}

.other-bar {
    height: 50px;
    background: blue;
}

HTML：

<div class="bar-wrapper">
    <div class="admin-bar"></div>
    <div class="other-bar"></div>
</div>

现场直播：http://jsfiddle.net/CVeXA

CSS 2位置：固定元素奇怪的行为

1 个答案: