css - 将 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.

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