Question

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

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

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

bootstrap fluid的菜单看起来像这样

<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;
}

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

如果您想首先使用管理菜单，我认为当您以管理员身份登录并编辑top:/*HEIGHT OF ADMIN MENU*/

时，您必须覆盖用户菜单的CSS

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来使其工作。

垂直堆叠的固定顶级html元素

3 个答案:

新的css类：

使用Javascript：