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, a centred container contains the div. When I use position:fixed, the div is fixed with respect to the browser window, for example, up against the right side. It ought to be fixed relative to the container instead.

I'm aware that position:absolute may be used to position an element in relation to a div, but when you scroll down the page, the element disappears and doesn't stay at the top like it would with position:fixed.

Is there a trick or a way to get around this?

Answer 1

The issue with "fixed" positioning is that it removes the element from the flow. As a result, it cannot be repositioned relative to its parent because it does not have one. If, on the other hand, the container has 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*/
}