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 を追加すると、ページの絶対上部から 0 ピクセルになります。下にスクロールすると、実際のページの上部だけでなく、実際のページの上部にあるため、ビューから消えます。見えるページ。top: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 に答える