Question

我为我的应用程序设计了一个主布局。我在纯html / css中创建它只是为了在布局开发期间保持简单。我使用bootstrap（所以也包括jquery）和less（对于我自己的文件较少）：

  <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，但不知何故，＃content＆gt; div.layoutInner＆gt; div.layoutItem与z-index：101重叠了＃menu＆gt; div.layoutInner与z-index：100
知道如何解决这个“小问题”吗？

Answer 1

您的问题是z-index堆叠的工作原理。

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

如果两个元素是直接兄弟，则它们在同一堆叠上下文中仅。在这种情况下，#menu和#content是兄弟姐妹。如果#menu z-index高于#content>.layoutOuter z-index，#menu z-index #content #menu无论价值如何，都会显示高于它。

Answer 2

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

HTML重叠元素的绝对元素

2 个答案: