固定位置但相对于容器 [英] Fixed position but relative to container

问题描述

我正在尝试修复 div 以便它始终粘在屏幕顶部，使用:

I am trying to fix a div so it always sticks to the top of the screen, using:

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

然而，div 位于一个居中的容器内.当我使用 position:fixed 时，它会相对于浏览器窗口修复 div，例如它位于浏览器的右侧.相反，它应该相对于容器固定.

However, the div is inside a centered container. When I use position:fixed it fixes the div relative to the browser window, such as it's up against the right side of the browser. Instead, it should be fixed relative to the container.

我知道 position:absolute 可用于固定相对于 div 的元素，但是当您向下滚动页面时，元素消失并且不会粘住与 position:fixed 一样到顶部.

I know that position:absolute can be used to fix an element relative to the div, but when you scroll down the page the element vanishes and doesn't stick to the top as with position:fixed.

是否有黑客或解决方法来实现这一目标?

Is there a hack or workaround to achieve this?

推荐答案

Short answer: no.(现在可以使用 CSS 转换.请参阅下面的编辑)

Short answer: no. (It is now possible with CSS transform. See the edit below)

长答案:使用fixed"的问题定位是它使元素脱离流动.因此它不能相对于它的父级重新定位，因为它好像没有一个.但是，如果容器具有固定的已知宽度，则可以使用以下内容:

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

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

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

这是过时的信息.现在可以借助 CSS3 转换的魔力将动态大小的内容(水平和垂直)居中.同样的原则适用，但您可以使用 translateX(-50%)，而不是使用边距来抵消您的容器.这不适用于上述边距技巧，因为除非宽度固定并且您不能使用相对值(例如 50%)，否则您不知道要偏移多少，因为它将是相对于父元素而不是它所应用的元素.transform 表现不同.它的值是相对于它们所应用的元素而言的.因此，对于 transform 来说，50% 意味着元素宽度的一半，而边距的 50% 是父元素宽度的一半.这是一个 IE9+ 解决方案

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

使用与上述示例类似的代码，我使用完全动态的宽度和高度重新创建了相同的场景:

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

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

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

If you want it to be centered, you can do that too:

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

演示:

jsFiddle:仅水平居中
jsFiddle:水平和垂直居中
原创感谢用户 aaronk6 在 这个答案

这篇关于固定位置但相对于容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！