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

问题描述：

我有一个元素（彼此相邻的两个锚点）在div（跨越约1150px，所以你需要向下滚动看到这个div的所有内容）。这个锚点是位置：固定在此div的顶部，因此您向下滚动div锚点将始终可见。
我的问题是当你缩小浏览器窗口的宽度，我想要第二个定位点在第一个下面的空间用完，但是直到浏览器窗口物理到达锚点，没有绕回正在发生，因此，

I have an element( 2 anchors next to each other) inside the div(spans about 1150px so you need to scroll down to see all the contents of this div). This anchors are position:fixed at the top of this div so as you scroll down the div anchor will be visible all the time. My problem is when you shrink the width of the browser window, I want second anchor to go below the first one as the space runs out, however until the browser window physically reaches the anchors, no wrap around is happening, so div is getting smaller and two anchors are overlapping each other.

当我删除位置固定，当我调整浏览器窗口和div的宽度收缩一个锚包裹在另一个一个如预期。所以我猜我只需要y轴固定而不是x轴。

When I remove the position fixed, as I resizes the browser window and div's width shrinks one anchor wraps below the other one as expected. So I am guessing I just need y-axis fixed but not x-axis.

答

position属性适用于元素整个。你真正想要的是一种新的position属性。

The position attribute applies to the element as a whole. What you're really asking is for a new kind of position attribute.

你可以应用固定的定位到包含你的两个锚点的元素，如果你的锚点设置为float，如果需要，它们将包装：

You could apply the fixed positioning to an element that contains your two anchors, and if your anchors are set to float, they will wrap if they need to:

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

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

相关推荐