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

让我来回答这两个可能的问题。请注意，你现有的标题(和原始帖子)提出的问题与你在编辑和后续评论中寻求的问题不同。

要将一个元素相对于父元素进行“固定”定位，您需要在子元素上使用position:absolute，并且在父元素上使用除默认或静态之外的任何位置模式。

例如:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

这将使childDiv元素相对于parentDiv的位置向左放置50像素，向下放置20像素。

要将一个元素相对于窗口定位为“固定”，您需要position:fixed，并且可以使用top:、left:、right:和bottom:来定位您认为合适的位置。

例如:

#yourDiv { position:fixed; bottom:40px; right:40px; }

这将使yourDiv相对于浏览器窗口的位置固定，距离底部边缘40像素，距离右侧边缘40像素。

下面是Jon Adams上面建议的一个例子，使用jQuery将div(工具栏)固定到页面元素的右侧。其思想是找到从视口的右侧到页面元素的右侧的距离，并保持工具栏的右侧在那里!

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});

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

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

CSS规范要求position:fixed锚定到视口，而不是包含的定位元素。

如果您必须指定相对于父元素的坐标，则必须首先使用JavaScript找到父元素相对于视口的位置，然后相应地设置子元素(固定)的位置。

替代方案:一些浏览器有CSS支持，它限制了一个元素在它的容器和视口中的位置。根据提交消息:

黏糊糊的……约束将元素定位在其容器框与视口的交集内。 粘性定位元素的行为类似于position:relative(空格为 在流中为它保留)，但偏移量由 粘性的位置。更改isinflow定位()覆盖相对和 粘。

根据您的设计目标，这种行为在某些情况下可能是有用的。它目前是一个工作草案，除了表元素之外，它还有不错的支持。位置:sticky在Safari中仍然需要-webkit前缀。

有关浏览器支持的最新统计信息，请参阅caniuse。