css - Fixed Position but Relative to Container

  显示原文与译文双语对照的内容

我正在尝试修复一个 div,所以它总是坚持在屏幕的顶部,使用:


position: fixed; 
top: 0px;
right: 0px;

但是,div 在一个居中的容器内。 当我使用 position:fixed 时,它将 div 固定到浏览器窗口,比如浏览器右侧。 相反,它应该相对于容器固定。

我知道 position:absolute 可以用来修复一个相对于 div的元素,但是当你向下滚动页面时,元素消失并且不会像 position:fixed 一样粘在顶部。

是否有 hack 或者变通方法来实现这里目的?

时间:

简短回答: 没有 ( 现在可以使用CSS转换了。 查看下面的编辑)

长答案:使用"固定"定位的问题是,它将元素的流量从 flow out 。 因此它不能是re-positioned相对于其父对象,因为它好像没有一个。 但是,如果容器是固定的已知宽度,则可以使用如下所示的:


#fixedContainer
{
 position: fixed;
 width: 600px;
 height: 200px;
 left: 50%;
 top: 0%;
 margin-left: -300px;/*half the width*/
}

http://jsfiddle.net/HFjU6/1/

编辑( 03/2015 ):

这是过时的信息。现在可以用CSS3变换的魔力来将动态大小( 水平和垂直) 中的内容居中。 同样的原理适用,但不使用边距来偏移容器,你可以使用 translateX(-50%) 。 这与上面的页边距技巧不起作用,因为你不知道偏移量是多少,除非宽度是固定的,并且你不能使用相对值( 像 50% ),因为它是相对于父级而不是应用到的元素。 transform的行为不同。它的值与它们应用于的元素相对应。 因此,50%transform 表示元素的一半宽度,而边距的50% 是父元素宽度的一半。 这是一个 IE9+ 解决方案

在上面的示例中使用相似的代码,我使用完全动态的宽度和高度重新创建了相同的场景:


.fixedContainer {
 background-color:#ddd;
 position: fixed;
 padding: 2em;
 left: 50%;
 top: 0%;
 transform: translateX(-50%);
}

如果你想让它居中,你也可以这样做:


.fixedContainer {
 background-color:#ddd;
 position: fixed;
 padding: 2em;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

演示:

仅水平居中:http://jsfiddle.net/b2jz1yvr/
居中和垂直居中: http://jsfiddle.net/b2jz1yvr/1/

原始信用转到用户 aaronk6,以便在这个答案中指出: http://stackoverflow.com 28773941/854246

实际上这是可行的,而选择的答案只处理 centralising,这很简单。 你真的不需要使用 JS 。

这将让你处理任何场景:

按照你想定位的方式设置所有内容: 绝对位置:相对容器,然后在div内创建一个新的固定位置 div,位置: 绝对,但做了磅set设置它的顶部和左属性。 然后它就会被固定在你想要的地方,相对于容器。

例如:


/* Main site body */
.wrapper {
 width: 940px;
 margin: 0 auto;
 position: relative;/* Ensure absolute positioned child elements are relative to this */
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
 width: 220px;
 position: absolute;
 top: 0;
 left: -240px;/* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
 width: 220px;
 position: fixed;
/* Do not set top/left! */
}

<div class="wrapper">
 <div class="fixed-wrapper">
 <div class="fixed">
 Content in here will be fixed position, but 240px to the left of the site body.
 </div>
 </div>
</div>

不幸的是,我希望这个线程可以解决我的问题,android渲染box-shadow模糊像素作为固定位置元素的边缘,但它似乎是一个 Bug 。 总之,希望这能帮助你 !

是的根据说明书有一种方法。

虽然我同意格雷姆的红木应该接受的答案,因为它几乎解决了这个问题,应该注意的是,一个固定的元素可以定位相对它的容器。

我偶然发现当应用时


-webkit-transform: translateZ(0);

对于身体,它相对于它的( 而不是 viewport ) 做了一个固定的子元素。 所以我的固定元素 lefttop 属性现在相对于容器。

所以我做了一些研究,发现这个问题已经被 。Meyer,即使它感觉像一个"戏法",它也是规范的一部分:

对于布局受CSS框模型支配的元素,转换结果以外的任何值都将创建堆叠上下文和包含块。 对象充当固定定位后代的包含块。

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

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

但是。。

问题是实现似乎是有创意的/创造性的,因为这些元素也会停止作为固定的( 即使这一点似乎不是规范的一部分) 。

在 Safari,Chrome 和 Firefox 中也会发现相同的行为,但在 IE11 ( 固定元素仍保持固定的位置) 中却没有。

另一个有趣的( 未记录文档)的事情是,当一个固定的元素包含在一个转换,而其 topleft 属性现在将相关容器,尊重 box-sizing 属性,其滚动上下文将扩展元素的边界,仿佛 box-sizing border-box 。 对于一些创造力,这可能成为一个玩具:

测试

答案是是的,只要你不设置左: 0或者右侧:将div位置设置为固定后 0.

http://jsfiddle.net/T2PL5/85/

签出侧边栏 div 。它是固定的,但与父级相关,而不是窗口视图点。


body{background: #ccc;}
.wrapper {
margin: 0 auto;
height: 1400px;
width: 650px;
 background: green;
}

.sidebar {
 background-color: #ddd;
 float: left;
 width: 300px;
 height: 100px;
 position: fixed;

}

.main {
float: right;
 background-color: yellow;
 width: 300px;
 height: 1400px;
}

<div class="wrapper">wrapper
 <div class="sidebar">sidebar</div>
 <div class="main">main</div>
</div>

只需将顶部和左侧的样式移出固定位置 div 。 下面是一个示例


<div id='body' style='height:200%; position: absolute; width: 100%; '>
 <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
 <div id='content' style='position: fixed;'>content</div>
 </div>
</div> 

#content div将位于父div所在的位置,但将在那里固定。

我创造了这个jquery插件来解决类似的问题我在那里有一个集中容器( 表格数据) 和我希望头修复页面的顶部列表滚动的时候,但我希望它固定在表格数据会不管我把容器( 居中,左,右) 也允许它与页面左右移动时水平滚动。

下面是这个jquery插件的链接,可以解决这个问题:

https://github.com/bigspotteddog/ScrollToFixed

这里插件的描述如下:

这里插件用于修复页面顶部的元素,如果元素将从视图中滚出视图,则允许元素继续向左或者向右滚动水平滚动。

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

这里插件已经在 Firefox 3/4, Google Chrome 10/11, Safari 5和 IE 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();
});

我不得不用客户想要坐在内容区域之外的广告来做这个。 我做了下面的事情,它工作起来像一个魅力 !


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

延迟回答:2 HTML元素和纯 CSS ( 现代浏览器)

see参见这个小提琴示例。 调整大小,并查看固定元素如何与它们所在的浮动元素一起移动。 使用内部大多数滚动条查看滚动在站点( 固定元素固定不变) 上的工作方式。

就像这里提到的,一个键没有在 fixed 元素( 没有 toprightbottom 或者 left 值) 上设置任何位置设置。

相反,我们将所有固定元素( 注意最后一个盒子有四个) 放在它们要放置的框中,比如:


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

然后我们使用 margin-topmargin-left 对它们的容器进行"移库",像这个css一样:


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

注意,因为 fixed 元素忽略所有其他布局元素,最后容器小提琴中可以有多个 fixed 元素,而且还有相关的所有这些元素的左上角。 但这只是事实,如果他们都是容器中排名第一,小提琴,因为这比较表明,如果分散在容器内的内容,定位成为不可靠。

包装是否静态相对,或绝对定位,它并不重要。

就像其他人说的,现在只做CSS是不可能的。 下面是我使用jQuery所得到的内容:

http://jsfiddle.net/UNnZQ/1/


var el = $('#my-element'),
 el_top = el.offset().top,
 el_pos = el.offset().left;
$(window).scroll(function() {
 if (!el.hasClass('fixed') && $(this).scrollTop()> el_top + el.height()) {
 el.addClass('fixed');
 el.css({
"left": el_pos
 })
 } else if (el.hasClass('fixed') && $(this).scrollTop() <= el_top) {
 el.removeClass('fixed');
 el.css({
"left":"auto"
 })
 }
});

CSS


#my-element {
 position:absolute;
 top:0;
 right:0; 
}

#my-element.fixed {
 position:fixed;
 right:auto;
}

每当窗口滚动( 这可以是一个资源) 时触发,并将"固定"类添加到元素并给它一个固定的left 位置值( 不管它的原始价值是什么) 。 放大/缩小和窗口调整大小将影响 left 定位。 也许有人可以清理这部分,但希望这有助于。

实现相对固定位置的另一个奇怪的解决方案是将容器转换为 iframe,这样固定的元素就可以固定到容器的viewport而不是整个页面。

...