固定位置但相对于容器

Question

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

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

但是,div它位于一个居中的容器内.当我使用position:fixed它时,修复了div浏览器窗口的相对位置,例如它在浏览器的右侧.相反,它应该相对于容器固定.

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

是否有实现此目的的黑客或解决方法？

Answer 1

简答:不.(现在可以使用CSS转换.请参阅下面的编辑)

答案很长:使用"固定"定位的问题在于它会使元素流出.因此它无法相对于其父级重新定位,因为它就好像它没有一个.但是,如果容器具有固定的已知宽度,则可以使用以下内容:

#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%);
}

演示:

jsFiddle:水平居中只有
jsFiddle:水平和垂直居中
原始信用转到用户aaronk6,在这个答案中指出它给我

Answer 2

实际上这是可能的,并且接受的答案仅涉及集中化,这很简单.你真的不需要使用JavaScript.

这将让您处理任何场景:

设置好一切,你会如果你要的位置:位置内绝对的:相对的容器,然后创建一个DIV中一个新的固定位置格position: absolute,但没有设置它的顶部和左侧属性.然后,它将相对于容器固定在您想要的任何位置.

例如:

/* 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的WebKit渲染框 - 阴影模糊像素作为固定位置元素上的边距来解决我的问题,但它似乎是一个错误.
无论如何,我希望这有帮助!

Answer 3

是的,根据规格,有一种方法.

虽然我同意Graeme Blackwood应该是公认的答案,因为它实际上解决了这个问题,但应该注意固定元素可以相对于其容器定位.

申请时我偶然注意到了

-webkit-transform: translateZ(0);

在身体上,它相对于它做了一个固定的孩子(而不是视口).所以我的固定元素left和top属性现在相对于容器.

所以我做了一些研究,发现这个问题已经被Eric Meyer所涵盖,即使它感觉像是一个"技巧",结果证明这是规范的一部分:

对于布局由CSS框模型控制的元素,转换的除none之外的任何值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

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

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

但...

问题是实现似乎有缺陷/创造性,因为元素也停止表现为固定(即使这个位似乎不是规范的一部分).

在Safari,Chrome和Firefox中可以找到相同的行为,但IE11中不会出现相同的行为(固定元素仍将保持固定).

另一个有趣的(无证)的事情是,当一个固定的元素包含变换元素中,而它top和left属性将现在进行相关的容器,尊重box-sizing财产,它的滚动上下文会超出元素的边框,仿佛箱-sizing设置为border-box.对于那里的一些创意,这可能成为一个玩物:)

测试

Answer 4

答案是肯定的,只要你没有设置left: 0或right: 0将div位置设置为fixed.

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>

Answer 5

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

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

.parent {
  contain: content;
}

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

Answer 6

position: sticky这是一种定位在概念上类似的元素的新方法position: fixed.不同之处在于,在视口中满足给定的偏移阈值之前,position: sticky行为与position: relative其父级内的行为类似.

在Chrome 56(目前截至2016年12月测试版,2017年1月稳定)位置:粘性现已回归.

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

更多细节在坚持你的着陆!位置:WebKit中的粘土.

Answer 7

我创建了这个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();
});

Answer 8

只需将固定位置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所在的位置,但将在那里修复.

Answer 9

你可以使用position: sticky财产.

以下是CODEPEN的示例,演示了其用法以及它与之的区别position: fixed.

它的表现如下:

1. 具有粘性位置的元素基于用户的滚动位置定位.它基本上就像position: relative一个元素滚动超过特定的偏移量,在这种情况下它转变为位置:固定.当它向后滚动时,它会回到其先前(相对)位置.

2. 它会影响页面中其他元素的流动,即占据页面上的特定空间(就像position: relative).

3. 如果它在某个容器内定义,则它相对于该容器定位.如果容器有一些溢出(滚动),根据滚动偏移,它将变为位置:固定.

因此,如果要在容器内部实现固定功能,请使用sticky.

Answer 10

position: fixed;如果您更改为，您就有了解决方案position: sticky;

所以你的代码应该是：

position: sticky;
top: 0;
right: 0;

现在其他 div 不会滑到下面了。

Answer 11

我不得不用我的客户希望坐在内容区域之外的广告来做这件事.我只是做了以下工作,它就像一个魅力!

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

Answer 12

免责声明：

这只是回答了标题：固定位置但相对于容器。对于用户要求的实际用例来说，position: sticky这是可行的方法。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

它相对于视口建立的初始包含块进行定位，除非其祖先之一将变换、透视或过滤器属性设置为除“无”以外的其他属性

您只需要向容器添加一个变换，固定元素的位置将相对于容器。我觉得一个transform: translateX(0);应该够了。

Answer 13

两个HTML元素和纯CSS(现代浏览器)

看到这个jsFiddle示例.调整大小并查看固定元素如何随着它们所处的浮动元素移动.使用最里面的滚动条来查看滚动在网站上的工作方式(固定元素保持固定).

由于这里的许多人所指出的,一个密钥不上设置任何位置设置fixed元素(无top,right,bottom,或left值).

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

<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 */
}

请注意,因为fixed元素会忽略所有其他布局元素,所以我们小提琴中的最终容器可以包含多个fixed元素,并且仍然具有与左上角相关的所有元素.但只有当它们全部放在容器中时才会出现这种情况,因为这种比较小提示如果分散在容器内容中,定位变得不可靠.

无论包装是静态的,相对的还是绝对的定位,都没关系.