Fixed position but relative to container

Question

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 1

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:

jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer

Answer 2

Actually this is possible and the accepted answer only deals with centralising, which is straightforward enough. Also you really don't need to use JavaScript.

This will let you deal with any scenario:

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute, but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.

For example:

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

Sadly, I was hoping this thread might solve my issue with Android's WebKit rendering box-shadow blur pixels as margins on fixed position elements, but it seems it's a bug.
Anyway, I hope this helps!