0

我为我的应用程序设计了一个主布局。我用纯 html/css 制作它只是为了在布局开发过程中保持简单。我使用引导程序（所以 jquery 也包括在内）和更少（对于我自己的更少文件）：

  <div id="header" class="layoutOuter">
    <div class="layoutInner">
      <div class="layoutItem">
        <div class="btn-group-sm pull-left">
          <button class="btn btn-default">Head Left 1</button>
          <button class="btn btn-default">Head Left 2</button>
        </div>
        <div class="btn-group-sm pull-right">
          <button class="btn btn-default">Head Right 1</button>
          <button class="btn btn-default">Head Right 2</button>
        </div>
      </div>
    </div>
  </div>
  <div id="menu" class="layoutOuter">
    <div class="layoutInner">
      <div class="layoutItem">
        <button class="btn btn-default btn-block">Menu 1</button>
        <button class="btn btn-default btn-block">Menu 2</button>
      </div>
    </div>
  </div>
  <div id="content" class="layoutOuter">
    <div class="layoutInner">
      <div class="layoutItem">
        <div>C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 </div>
      </div>
    </div>
  </div>

较少的：

@bodyBackground: white;
@pageWidth: 1024px;
@headerHeight: 30px;
@leftMenuWidth: 100px;
@headerContentDistance: 6px;

body {
    padding: 0;
    margin: 0;
    background-color: @bodyBackground;
}
.layoutOuter {
    text-align: center;
    height: 0;
    left: 0;
    right: 0;
    >.layoutInner {
        text-align: left;
        display: inline-block;
        >.layoutItem {
            display: inline-block;
        }
    }
}
#header {
    position: fixed;
    top: 0;
    background-color: inherit;
    z-index: 100;
    >div.layoutInner {
        background-color: inherit;
        >div.layoutItem {
            background-color: inherit;
            height: @headerHeight;
            width: @pageWidth;
        }
    }
}
#content {
    position: absolute;
    top: @headerHeight + @headerContentDistance;
    >div.layoutInner {
        text-align: left;
        width: @pageWidth;
        >div.layoutItem {
            z-index: 101;
            float: right;
            width: @pageWidth - @leftMenuWidth;
        }
    }
}
#menu {
    position: fixed;
    top: @headerHeight + @headerContentDistance;
    background-color: inherit;
    z-index: 100;
    >div.layoutInner {
        text-align: left;
        width: @pageWidth;
        background-color: inherit;
        z-index: 100;
        >div.layoutItem {
            z-index: 100;
            width: @leftMenuWidth;
        }
    }
}

当我将浏览器的大小调整为较小的宽度时，问题就开始了。滚动时，我的内容在菜单元素下可见。我开始使用背景颜色，但没有成功。然后是z-index，但不知何故，带有z-index：101的#content>div.layoutInner>div.layoutItem被带有z-index：100的#menu>div.layoutInner重叠了
任何想法如何解决这个“小”问题？

4

2 回答 2

2

你的问题是z-index堆叠是如何工作的。

在这种情况下，您实际上需要放置高于 of 的 a z-index，#content因为z-index这#menu两个元素存在于相同的堆叠上下文中。

如果两个元素是直接兄弟，则它们仅在相同的堆叠上下文中。在这种情况下，#content和#menu是兄弟姐妹。您可以z-index #content>.layoutOuter随心所欲，但如果z-indexof#menu高于z-indexof #content，#menu则无论值如何，都将显示高于它。

于 2013-09-13T12:36:57.443 回答
0

我终于 - 它持续了一天 - 想出了一个部分解决方案。
我切换#menu和#content。这样，菜单与内容重叠。它无法隐藏上下文，因为.layoutItem上下文不是那么宽，无法滑到菜单下（如果窗口宽度至少为 1024 像素），并且如果我左右滚动（如果窗口窄），内容会滑下菜单，它在右侧菜单按钮之间可见。所以我将 #menu>div.layoutInner>div.layoutItem 更改background-color为@bodyBackground.

于 2013-09-13T13:49:12.103 回答