CSS如何定位元素仅针对y轴定位？

Question

我在div中有一个元素（彼此相邻的2个锚点）（跨越大约1150px所以你需要向下滚动才能看到这个div的所有内容）。这个锚是位置：固定在这个div的顶部，所以你向下滚动div锚将一直可见。 我的问题是当你缩小浏览器窗口的宽度时，我希望第二个锚点在第一个锚点下方，因为空间用完了，但是直到浏览器窗口物理到达锚点，没有发生环绕，所以div变得越来越小两个锚点相互重叠。

当我移除固定的位置时，当我调整浏览器窗口的大小时，div的宽度会缩小一个锚点，如预期的那样在另一个下面。所以我猜我只需要固定y轴而不是x轴。

Answer 1

position属性作为一个整体应用于元素。你真正要问的是一种新的位置属性。

您可以将固定定位应用于包含两个锚点的元素，如果您的锚点设置为浮动，则它们将在需要时进行换行：

<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>

Answer 2

关于fixed-y / scrollable-x的类似问题是subject of an earlier discussion，其结论是你需要JavaScript来做，正如其他人所说的那样。

答案中的一般方法是每隔十分之一秒左右查看元素是否应该被移动，然后如果是这样移动它们。

Answer 3

看起来这可能是this question的重复。

简而言之，你不能用纯CSS做到这一点。你需要JavaScript。我推荐jQuery。