0

我有以下布局：布局

在左侧我有一个菜单，右侧的大灰色部分是正文内容。问题出在左侧菜单上，我有一堆按钮。我希望这个菜单是固定位置和正文可滚动的。我有以下CSS：

#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}

问题是，在我的菜单的红色部分，所有按钮都不可用，我无法点击它。看起来 body 覆盖了菜单。

任何想法可能是什么问题？

谢谢

4

2 回答 2

1

为了将其固定到顶部而不滚动，您不要使用position: fixed;. 你需要使用position: absolute;. 如果您不希望它位于最顶部，则可以使用position: relative;并将其放置在元素中。

然后，为了滚动，您使用position: fixed;.

使用时position: fixed，它会将元素固定在可见页面内。

但是，当您使用 时position: absolute，它所做的就是将它放在页面上的绝对位置，而不管滚动。例如，如果您添加了 css，top:0;那么它将是页面绝对顶部的 0 个像素，如果您向下滚动，它将从视图中消失，因为它一直位于实际页面的顶部，而不仅仅是顶部可见页面。

我知道这对你来说似乎有点违反直觉。但是，您可以在下面的 jsbin 中看到它。

工作jsbin：http:
//jsbin.com/Uwuyuha/1

page.html

<body>
  <div id="container">
    <div id="menu">
            1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
    <div id="content">
    </div>
  </div>
</body>

样式.css

body {
  width: 100%;
  height: 100%;
}
#container {
  width: 1000px;
  height: 1000px;
}
#menu {
  width: 250px;
  height: 2000px;
  position: fixed;
  background: #999;
}
#content {
  width: 650px;
  height: 300px;
  position: absolute;
  margin-left: 251px;
  background: #444;
}
于 2013-10-17T17:22:19.063 回答
1

包含 html 可以更好地了解堆叠顺序，并可能产生更好的答案。鉴于您提供的内容，这应该可以解决：

#menu {
  position: fixed;
  z-index: 1;
}
于 2013-10-17T17:23:17.523 回答