css - 固定 div 旁边的居中 div

Question

我有一个网页，其中有可滚动的内容。此内容包含在#content 中，它以页面为中心。现在我想要一个导航栏出现在内容左侧 50 像素处。这个栏应该有一个固定的位置（不应该滚动）。

这是我到目前为止所尝试的：

#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;
}

工作示例。

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

Answer 2

我已经找到了解决方案。

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

我只是给了它 left: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;
}