修复了居中div旁边的div

Question

我有一个可滚动内容的网页。此内容包含在#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％。

这是一张图片来说明我想要实现的目标。

Answer 1

有一点棘手的解决方案。 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;
}

Working example.

当然有些值只是为了展示。

Answer 2

我已经找到了解决方案。

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

我刚给它了：50％和左边距离内容宽度的一半+ 50px +导航栏的宽度。

Answer 3

只需将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;
}