Making a relative div fixed to the top of the screen
<p>I need to make <code>#outer1</code> to be fixed at the top of screen, but I cannot do it without messing up the current positions. I cannot just make <code>#outer1</code> fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned. What should I do instead to make <code>#outer1</code> to be fixed at the top of the screen?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  border: 1px solid black;
}
#outer1 {
  height: 100px;
  position: relative;
}
#outer2 {
  height: 900px;
}
#left {
  display: inline-block;
}
#right {
  display: inline-block;
  position: absolute;
  right: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='outer1'&gt;
  &lt;div id='left'&gt;Left&lt;/div&gt;
  &lt;div id='right'&gt;Right&lt;/div&gt;
&lt;/div&gt;

&lt;div id='outer2'&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>