3

スクロール可能なコンテンツがあるWebページがあります。このコンテンツは、ページの中央にある#content内にラップされています。ここで、ナビゲーションバーをコンテンツの50px左に表示したいと思います。このバーの位置は固定されている必要があります（スクロールしないでください）。

これは私がこれまでに試したことです：

#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:15%;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}


#content {
position: relative;
width: 800px;
margin: 0px auto;
padding-top: 100px;
}

これは明らかに私が望んでいることではありません。これは、ナビゲーションが画面の左から15％になっているためです。

これが私が達成したいことを説明するための画像です。 ペイント例

4

3 に答える 3

4

少しトリッキーな解決策があります。の要素position: fixedは常にブラウザウィンドウに関連しています（より少ない）。これは、設定されている場合でも、親の寸法と位置を常に無視することを意味しposition: relativeます。解決策は、まったく設定leftしないことです。

これがあなたがする必要があることです： HTML

<div class="content">
  <div class="fake">
    <div class="nav"></div>
  </div>
  content
</div>

CSS

.fake {
  position: absolute;
  left: -50px;
  top: 0;
}
.nav {
  position: fixed;
  top: 50px;
  width: 40px;
  height: 100px;
  background: #c11;
}
.content {
  position: relative;
  width: 800px;
  height: 1000px;
  margin: 0px auto;
  background: #ccc;
}

実例。

もちろん、一部の値は表示用です。

于 2013-03-26T21:58:19.503 に答える
1

私はすでに解決策を見つけました。

#nav{ 
left:50%; 
margin-left:-550px;
}

私はちょうどそれを左に与えました：50％とマージン-コンテンツの幅の半分+50px+ナビゲーションバーの幅の左。

于 2013-03-26T21:58:28.437 に答える
0

nav中に入れるだけcontent

<div id="content">
  <div id="nav"></div>
   .....
     ......

</div>

それから

#nav {
position: fixed;
top: 50%;
margin-top:-200px;
left:-100px;
background: #FFF;
width: 100px;
height:400px;
border-radius: 50px;
}
于 2013-03-26T21:53:46.420 に答える