Zach Nicodemous Zach Nicodemous - 3 months ago 51
CSS Question

Fixed position but relative to container

I am trying to fix a

div
so it always sticks to the top of the screen, using:

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


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.

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?

Answer

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/

Edit (03/2015):

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

Demos:

Centered horizontally only: http://jsfiddle.net/b2jz1yvr/
Centered both horizontaly and vertically: http://jsfiddle.net/b2jz1yvr/1/

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

Comments