我想在 div 左侧添加一个菜单，但相对于正文顶部是固定的。因此，当我滚动 div 时，左侧菜单会粘在屏幕上。
.container {
position: relative;
width: 70%;
margin-right: auto;
margin-left: auto;
height: 1300px;
background-color: grey;
}
.menu_fixed_left {
position: absolute;
left: -50px;
width: 50px;
margin-top: 100px;
z-index: 2;
background-color: silver;
}
ul {
list-style-type: none;
padding: 15px;
}<body>
<div class="container">
<div class="menu_fixed_left">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
Container
</div>
</body>这是 fiddle .
最佳答案
您必须执行以下步骤:
首先，您必须将菜单显示为
固定。其次，要将其放置在
body的顶部，您必须使用top: 0(或者您可以将其更改为您想要的顶部以 body 标签为引用)。由于内容 div 占据了屏幕宽度的 70%，并且
margin: auto这意味着它有 15%(30% 没有占据，并且每个都相同边，每边屏幕的 30%/2 = 15%)，因此您必须使用 calc 来调整每边的 15%，也就是占据菜单的 50px。移除
body标签的默认边距。
关于css - 如何将一个 div 定位到另一个 div 并将顶部固定到 body？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37611740/