如果容器使用某些包含规则，则可以将元素相对于其容器定位为固定位置。

<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

这很简单（根据下面的HTML）

技巧是不要在元素（div）上使用“position:fixed；”的top或left。如果未指定这些元素，则“fixed content”元素将显示为相对于封闭元素（具有“position:RELATIVE；”的div）INSTEAD OF相对于浏览器窗口！！！

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置（不会随滚动文本移动，但当用户调整浏览器窗口的宽度时，它会随包围div容器向左或向右移动！因此，它垂直“固定”，但相对于包围元素水平定位！

在我开始工作之前，当我向下滚动文本内容时，“X”向上滚动并消失。

很抱歉没有提供我的javascript hideDiv（）函数，但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。

我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。

这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。

.your-class {
  position: fixed;
  right: calc((100vw - 90%)/2);
}

这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。

我创建了这个jQuery插件来解决我遇到的类似问题，我有一个居中的容器（表格数据），我希望在滚动列表时将标题固定在页面顶部，但我希望它锚定在表格数据上，这样它就可以放在我放置容器的任何位置（居中、左、右），并允许它在水平滚动时随页面左右移动。

下面是这个jQuery插件的链接，它可以解决这个问题：

https://github.com/bigspotteddog/ScrollToFixed

该插件的描述如下：

该插件用于将元素固定到页面顶部，如果元素垂直滚动到视图之外；然而，它确实允许元素随着水平滚动继续向左或向右移动。

给定选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动到目标位置，元素将恢复到页面上的原始位置。

该插件已在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试。

特定案例的用法：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

两个HTML元素和纯CSS（现代浏览器）

请参见这个jsFiddle示例。调整大小并查看固定元素如何随浮动元素一起移动。使用最内侧的滚动条查看滚动在站点上的工作方式（固定元素保持固定）。

正如这里许多人所说的，一个键没有在固定元素上设置任何位置设置（没有上、右、下或左值）。

相反，我们将所有固定元素（注意最后一个框中有四个元素）放在要放置的框中，如下所示：

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

然后我们使用margin-top和margin-left相对于容器“移动”它们，就像这个CSS所做的那样：

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

注意，因为固定元素忽略了所有其他布局元素，所以fiddle中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。

包装器在定位上是静态的、相对的还是绝对的，这无关紧要。

我不久前做过类似的事。我对JavaScript很陌生，所以我相信你可以做得更好，但这里有一个起点：

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

您需要设置宽度，然后它会获取窗口宽度并每隔几秒更改边距。我知道它很重，但它有效。