为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说，position:fixed不起作用，因为当我滚动页面时，元素保持在固定位置，但您可以使用溢出功能实现类似的效果。

在下面的狙击中，检查标题在父容器中是如何固定的，但是当你滚动主体时，它也会滚动

#爷爷{宽度：100vw；高度：120vh；背景色：rgb（236、233、233）；溢出：隐藏；}#父母{宽度：200px；高度：200px；背景色：青色；溢出：隐藏；}#儿童1{填充：1em}#儿童2{高度：100px；背景色：卡其色；overflow-y：滚动；}<div id=“爷爷”><div id=“parent”><div id=“child1”>标题</div><div id=“child2”><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p></div></div></div>

是的，根据规格，有办法。

虽然我同意格雷姆·布莱克伍德的答案应该是公认的，因为它实际上解决了这个问题，但应该注意的是，固定元素可以相对于其容器定位。

我无意中注意到在申请时

-webkit-transform: translateZ(0);

相对于身体，它创建了一个固定的子对象（而不是视口）。所以我左边的固定元素和顶部的财产现在是相对于容器的。

所以我做了一些研究，发现这个问题已经被埃里克·迈耶（Eric Meyer）所涵盖，即使这感觉像是一个“把戏”，但事实证明这是规范的一部分：

对于布局由CSS框模型控制的元素，任何值如果转换结果为“无”，则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。

http://www.w3.org/TR/css3-transforms/

因此，如果对父元素应用任何变换，它将成为包含块。

但是

问题是，实现似乎有问题/有创意，因为元素也停止了固定的行为（即使这一点似乎不是规范的一部分）。

同样的行为在Safari、Chrome和Firefox中都可以找到，但在IE11中没有（其中固定元素仍然保持固定）。

另一件有趣的（未记录的）事情是，当一个固定元素包含在一个转换的元素中时，虽然它的顶部和左侧财产现在将与容器相关，但考虑到方框大小属性，它的滚动上下文将扩展到元素的边界，就像方框大小设置为border-box一样。对于一些有创意的人来说，这可能会成为一件玩物：）

TEST

我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情，它就像一个魅力！

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

使用纯CSS，你无法做到这一点；至少我没有。然而，您可以非常简单地使用jQuery来实现。我会解释我的问题，稍加改动你就可以使用了。

因此，首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将元素放到父元素中，并设置父元素的位置：relative。

然后，您需要知道当滚动条位于顶部（y为零滚动）时，元素距离顶部的距离是多少；还有两种选择。首先，它是静态的（一些数字），或者必须从父元素中读取它。

在我的例子中，它距离顶部静态图像150像素。所以，当你看到150时，它是当我们没有滚动时，元素从顶部开始的数量。

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

我不久前做过类似的事。我对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)
}

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

位置：粘滞，这是一种新的定位元素的方法，在概念上类似于位置：固定。不同之处在于，在视口中满足给定的偏移阈值之前，具有position:sticky的元素在其父元素中的行为类似于position:relative。

在Chrome 56中（目前为2016年12月的测试版，2017年1月稳定）：粘性现在又回来了。

https://developers.google.com/web/updates/2016/12/position-sticky

更多详情请参见“坚持你的着陆！”！位置：WebKit中的粘性土地。