通过多个divs，我成功地获得了固定的y和绝对的x divs。 在我的情况下，我需要一个div在左右两侧，对齐到一个中心1180px宽度的div。

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>

我知道这是超级古老的，但在没有找到(纯CSS)答案我正在寻找，我想出了这个解决方案(部分抽象自medium.com)，并认为它可能有助于其他人寻找做同样的事情。

如果你结合@DuckMaestro的答案，你可以定位一个固定相对于父元素(实际上是祖父母)的元素。使用位置:绝对;用position: relative在父元素中定位一个元素;然后位置:固定;在绝对定位元素内部的元素上，如下所示:

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

例子

就像@JonAdams说的，position: fixed的定义要求元素相对于视口定位，但你可以使用这个解决方案来解决水平方面的问题。

注意:这与仅在固定元素上设置左右值不同，因为在调整窗口大小时，这将导致它水平移动。

首先，设置位置:固定和左侧:50%，其次-现在你的起点是一个中心，你可以设置新的位置与边缘。

通过多个divs，我成功地获得了固定的y和绝对的x divs。 在我的情况下，我需要一个div在左右两侧，对齐到一个中心1180px宽度的div。

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>

我知道这是一个较老的帖子，但我认为在这个网站上已经可以找到Jiew孟试图做的一个很好的例子。查看位于这里的侧菜单:https://stackoverflow.com/faq#questions。在不深入研究它的情况下，我可以告诉javascript，一旦滚动到达锚标记以下，就会附加一个固定的位置，如果滚动到同一锚标记以上，就会删除固定的位置。希望这能让一些人从正确的方向开始。

2016年更新

在现代浏览器中，可以将元素定位为相对于其容器的固定位置。具有transform属性的元素充当其任何固定位置子元素的视口。

或者如CSS转换模块所说:

对于布局由CSS框模型控制的元素，transform属性的任何值除了为零之外也会导致元素为所有后代建立一个包含块。它的填充框将用于布局它的所有绝对位置后代、固定位置后代和后代固定背景附件。

.context { width: 300px; height: 250px; margin: 100px; transform: translateZ(0); } .viewport { width: 100%; height: 100%; border: 1px solid black; overflow: scroll; } .centered { position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); } <div class="context"> <div class="viewport"> <div class="canvas"> <table> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> </table> <button class="centered">OK</button> </div> </div> </div>