Question

是否可以修复HTML元素，以便在用户滚动时保持相同的位置？

问题是：如果我使用＆＃34; position：fixed＆＃34 ;,元素会失去与容器的关系并改变实际位置。它弹出网站包装器（当然）但我希望它保持其位置，并在滚动时保持位置。

这可能吗？

Answer 1

您可以将位置元素设置为固定，但不要设置顶部，左侧，底部或正确参数。

只要您不设置它们，您的元素将保留在它所属的位置（相对于初始父级定位）

.your-element{
    position: relative;
}

选中此fiddle

Answer 2

使用css，您只能使用position:fixed执行此操作。如果您知道元素的高度，那么您排除的问题可以稍微减轻。您可以在内容周围的元素上设置margin-top以将其从顶部偏移。

#topbar {
  height: 5em;
}

#content {
  margin-top: 5em;
}

＆＃13;

#topbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:5em;
  background: yellow;
  border: 1px red dotted;
}

#content {
  margin-top: 5em;
  padding-top: 5px;
  background: #EEEEFF;
  border: 1px blue dotted;
  height: 500em;
}

＆＃13;

<div id="topbar">Something in the topbar</div>
<div id="content">This text is magically displayed under the topbar</div>

＆＃13;

固定导航栏不仅位置：固定

2 个答案: