小开

最佳答案

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

将一个相对于父元素的元素定位为“固定”，你需要在子元素上使用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相对于web浏览器窗口的位置固定，距离底部边缘40像素，距离右侧边缘40像素。

小开

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

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

替代:一些浏览器有sticky CSS支持，它限制一个元素同时位于它的容器和视口中。根据提交消息:

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

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

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

小开

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

超文本标记语言

<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();
});

小开

首先，设置position: fixed和left: 50%，其次-现在你的开始是一个中心，你可以设置新的位置与边缘。

小开

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

小开

与多个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>

小开

这是一个旧的帖子，但我将留下我的javascript解决方案，以防有人需要它。

.

// you only need this function
function sticky( _el ){
_el.parentElement.addEventListener("scroll", function(){
_el.style.transform = "translateY("+this.scrollTop+"px)";
});
}




// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);

#blbl{
position:relative;
height:200px;
overflow: auto;
background: #eee;
}


#blbl > div{
position:absolute;
padding:50px;
top:10px;
left:10px;
background: #f00
}

<div id="blbl" >
<div><!-- sticky div --></div>


<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

笔记

我使用transform: translateY(@px)，因为它应该是轻量级的计算，high-performance-animations

我只在现代浏览器中尝试了这个功能，它不适用于需要供应商的旧浏览器(当然还有IE)

小开

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

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

超文本标记语言

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

< a href = " http://codepen。io / whancock_ /钢笔/ AXPVdO noreferrer“rel = > < / >示例

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

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

小开

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>

小开

这个解决方案对我很有效!参考原始的详细答案:https://stackoverflow.com/a/11833892/5385623


.level1 {
position: relative;
}




.level2 {
position: absolute;
}




.level3 {
position: fixed;
/* Do not set top / left! */
}

    <div class='level1'>
<div class='level2'>
<div class='level3'>
Content
</div>
</div>
</div>

我能定位一个相对于父元素固定的元素吗?

超文本标记语言

CSS

jQuery

超文本标记语言

CSS

2016年更新