固定位置，但相对于容器 [英] 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?

推荐答案

简短答案： no。（现在可以使用CSS变换了，见下面的编辑）

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

：使用固定定位的问题是它需要元素流出。因此它不能相对于其父对象重新定位，因为它好像没有它。然而，如果容器是固定的，已知的宽度，你可以使用如下：

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 的行为不同。它的值相对于它们应用的元素。因此， 50％代表 transform 表示元素宽度的一半，而 50％ / code>的边距是父级宽度的一半。这是 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%);
}

如果你想把它居中，你也可以这样做： p>

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

演示：

仅水平居中： http://jsfiddle.net/b2jz1yvr/

水平和垂直居中：< a href =http://jsfiddle.net/b2jz1yvr/1/> http://jsfiddle.net/b2jz1yvr/1/

原始信用转给用户 aaronk6 ，以便在此答案中将其指向我： http://stackoverflow.com/a/28773941/854246

Original credit goes to user aaronk6 for pointing it out to me in this answer: http://stackoverflow.com/a/28773941/854246

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