Question

我想在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。

Answer 1

您必须遵循以下步骤：

首先，您必须将您的菜单显示为fixed。
其次，要将其置于body的顶部，您必须使用top: 0（或者您可以将其更改为所需的顶部作为身体标记的参考）。
由于内容div占据屏幕宽度的70％margin: auto，这意味着它有15％（30％不占用，每边相同，30％/ 2 = 15％的每一面的屏幕，所以你必须使用calc来休息到每边的15％，50px占据你的菜单。
删除body代码的默认边距。

Updated JSFiddle

Answer 2

.menu_fixed_left {
position: fixed;
left:194px;
width: 50px;
margin-top: 100px;
z-index: 2;
background-color: silver;
}

而不是position: absolute;拥有position: fixed;并将左侧属性更改为200px Pen

Answer 3

将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以解释它的作用。

Updated FIddle

Answer 4

Position:fixed如果您使用保证金代替协调，则应：

https://jsfiddle.net/mkksLwvz/6/

在整页下面的测试代码段和调整窗口大小以找出

＆＃13;
＆＃13;
.container { position: relative; width: 70%; margin-right: auto; margin-left: auto; height: 1300px; background-color: grey; } .menu_fixed_left { position: fixed; margin-left: -50px;/* instead left */ width: 50px; margin-top: 100px; z-index: 2; background-color: silver; } ul { list-style-type: none; padding: 15px; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何将div左侧定位到另一个div并将top固定到body？

4 个答案: