CSS如何将元素固定在y轴上的位置？

Question

CSS如何将元素固定在y轴上的位置？

9

我有一个元素（两个相邻的锚点）在div中（大约占据1150像素，所以您需要向下滚动才能看到此div的所有内容）。这些锚点在div顶部被设置为position:fixed，因此当您向下滚动div时，锚点将一直可见。我的问题是，当您缩小浏览器窗口的宽度时，随着空间不足，我希望第二个锚点出现在第一个锚点下方，但是直到浏览器窗口实际到达锚点之前，没有发生换行，因此div变小而两个锚点重叠。

当我删除position fixed时，随着调整浏览器窗口大小和div宽度收缩，一个锚点正如预期地包裹在另一个锚点下面。因此，我想我只需要y轴固定而不是x轴。

- user_1357

3个回答

2

关于固定y轴/可滚动x轴的类似问题，早期的讨论中已有结论，需要使用JavaScript来实现，正如其他人所说。

那个答案的一般方法是每隔约十分之一秒检查一次元素是否需要移动，然后如果需要就将它们移动。

- Pete Wilson

0

看起来这可能是这个问题的一个可能的重复。

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

- Charles Sprayberry

我正在使用GWT，所以我想查看该方法的实现。你能给我一个代码示例来实现这个吗？谢谢。 - user_1357

@MayumiL 抱歉，我不熟悉 GWT。 - Charles Sprayberry

我是指 JQuery 代码片段.. 谢谢 - user_1357

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- javaJake · Accepted Answer

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>