title: Fixed position but relative to container
body: <p>I am trying to fix a <code>div</code> so it always sticks to the top of the screen, using:</p>
  
  <pre><code>position: fixed;
  top: 0px;
  right: 0px;
  </code></pre>
  
  <p>However, the <code>div</code> is inside a centered container. When I use <code>position:fixed</code> it fixes the <code>div</code> 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.</p>
  
  <p>I know that <code>position:absolute</code> can be used to fix an element relative to the <code>div</code>, but when you scroll down the page the element vanishes and doesn't stick to the top as with <code>position:fixed</code>.</p>
  
  <p>Is there a hack or workaround to achieve this?</p>