html - CSS如何定位只为y轴固定的元素？

Question

我在 div 中有一个元素(2 个相邻的 anchor )(跨度约为 1150 像素，因此您需要向下滚动才能看到该 div 的所有内容)。此 anchor 位于此 div 的顶部，因此当您向下滚动时，div anchor 将始终可见。我的问题是当你缩小浏览器窗口的宽度时，我希望第二个 anchor 在空间用完时低于第一个 anchor ，但是直到浏览器窗口物理到达 anchor 之前，没有发生环绕，所以 div 越来越小并且两个 anchor 相互重叠。

当我删除固定位置时，因为我调整了浏览器窗口的大小并且 div 的宽度缩小了一个 anchor ，如预期的那样包裹在另一个 anchor 下方。所以我猜我只需要固定 y 轴而不是 x 轴。

Answer 1

position 属性应用于整个元素。您真正要求的是一种新的位置属性。

您可以将固定定位应用于包含两个 anchor 的元素，如果您的 anchor 设置为 float ，则它们会在需要时换行:

<style type="text/css">
  #fixed {
    position: fixed;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

...

<div id="fixed">
  <div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
  <p>something here...</p>
</div>