Css 如何将一个div向左定位到另一个div，并将顶部固定到身体上？

我想添加一个菜单左到一个div，但相对于主体顶部固定。因此，当我滚动div时，左边的菜单会粘在屏幕上

.container{
位置：相对位置；
宽度：70%；
右边距：自动；
左边距：自动；
高度：1300px；
背景颜色：灰色；
}
.菜单\u已修复\u左侧{
位置：绝对位置；
左：-50px；
宽度：50px；
边缘顶部：100px；
z指数：2；
背景颜色：银色；
}
保险商实验室{
列表样式类型：无；
填充：15px；
}

A
B
C
D

容器

而不是

位置：绝对具有<代码>位置：固定并将左属性更改为200px
您必须遵循以下步骤：


首先，您必须将菜单显示为
fixed

其次，要将其放置在
主体的顶部
，您必须使用
top:0
（或者您可以将其更改为所需的顶部，并将主体标记作为参考）

由于content div使用
margin:auto
占据屏幕宽度的70%，这意味着它在屏幕的每一侧都有15%（30%未占据，每侧相同，30%/2=15%），因此您必须使用calc将屏幕的每一侧的15%保留下来，即占据菜单的50px

删除
正文
标记的默认边距


.
将CSS更改为

.menu_fixed_left{
  position: fixed; /* fixed position */
  left: 15%; /* left side of .container */
  margin-left: -50px; /* set it to the left, the same amount as the width*/
  background-color:silver;
  width:50px;
  margin-top:100px;
  z-index: 2;
}

CSS被注释以解释它的功能

位置：如果您使用边距而不是坐标，则固定的
应该可以：


在整个页面中测试下面的代码段，并调整窗口大小以找到答案


.container{
位置：相对位置；
宽度：70%；
右边距：自动；
左边距：自动；
高度：1300px；
背景颜色：灰色；
}
.菜单\u已修复\u左侧{
位置：固定；
左边距：-50px；/*改为左边距*/
宽度：50px；
边缘顶部：100px；
z指数：2；
背景颜色：银色；
}
保险商实验室{
列表样式类型：无；
填充：15px；
}


A
B
C
D

容器
？->InsertUserName here:position:fixed（位置：固定）时，修改屏幕宽度时，左菜单不会固定在主div左边框上。您可以简单地使用百分比计算
左
的值，如中所建议的。我想他不希望它固定在顶部（顶部：0）@胡安：从这个问题上我能理解的是，他想把它放在身体顶部，但我会等到他告诉我一些事情。无论如何，我让他知道，他可以更改所需顶部的值（以body标记为参考）；我喜欢你的答案，因为使用了：左：calc（15%-50px）@Vincent注意到使用
margin top:100px
您正在占用一个空间，而使用
top:100px
您将不会占用空间。@Error404抱歉，因为这是我的第一篇文章，我误用了按钮。它工作得很好！
.menu_fixed_left{
  position: fixed; /* fixed position */
  left: 15%; /* left side of .container */
  margin-left: -50px; /* set it to the left, the same amount as the width*/
  background-color:silver;
  width:50px;
  margin-top:100px;
  z-index: 2;
}