html - 垂直堆叠的固定顶部 html 元素

Question

我正在使用twitter bootstrap 流体css 来构建 cms(Dotnetnuke) 皮肤。cms 显示一个控制面板，当管理员登录时，该控制面板固定在页面顶部。这就是它的样子

<div id="dnnCPWrap"> ... </div>

#dnnCPWrap {
    width: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1001 !important;
}

引导流体的菜单如下所示

<div class="navbar-fixed-top"> ... </div>

.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

如您所见，它们都固定在窗口的顶部，并且由于流体菜单具有更高的 z-index，它覆盖了 cms 的控制面板。问题是，是否可以将它们堆叠在一起而控制面板堆叠在顶部？

注意： cms 的控制面板仅在管理员登录时显示，因此用户看不到它。谢谢

Answer 1

我认为快速的解决方案是在此处编辑 css：

#dnnCPWrap {
  width: 100%;
  position: fixed;
  left: 0px;       
  top: 0px;       /*PUT THE HEIGHT OF THE USER NAV MENU */
  z-index: 1001 !important;
}

使用该解决方案，管理面板显示在用户的导航菜单下方。

如果你想先有管理员菜单，我认为你必须在以管理员身份登录并编辑时覆盖用户菜单的csstop:/*HEIGHT OF ADMIN MENU*/

Answer 2

这是我想出的解决方案：

新的 CSS 类：

.navbar-admin-mode {top: 36px;z-index:1000;}

Javascript：

$(document).ready(function() {
    var cp = $("#dnnCPWrap")[0];
    if (typeof cp !== "undefined") {
      $(".navbar-fixed-top").addClass("navbar-admin-mode");
    }
});

由于管理员控制面板 div(#dnnCPWrap) 仅在用户以管理员身份登录时才存在，因此 css 类仅添加到皮肤菜单中，仅供管理员使用。

Answer 3

抱歉，还不能评论。对于 Dnn 7.2.x，选择器应使用 #ControlBar_ControlPanel 而不是 #dnnCPWrap 使其工作。