Making a relative div fixed to the top of the screen - html

Question

I need to make #outer1 to be fixed at the top of screen, but I cannot do it without messing up the current positions. I cannot just make #outer1 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 #outer1 to be fixed at the top of the screen?
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;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>

Answer 1

I cannot just make #outer fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned.
Simply because the most common arrangement for absolutely positioned children involves a relatively positioned parent, doesn't mean that's the only way.
The rule for absolutely positioned elements is that their containing block is the nearest positioned ancestor. #outer1 with position fixed is a positioned ancestor, so it qualifies. It's just that 99% of the time people use position: relative since that has minimal impact on the parent.
There's no problem using position: fixed as a containing block for absolutely positioned children.
From MDN:
A positioned element is an element whose computed position
property is either relative, absolute, fixed or sticky. (In other words, anything other than static)
A relatively positioned element is an element whose computed
position property is relative.
An absolutely positioned element is an element whose computed
position property is absolute or fixed.
A stickily positioned element is an element whose computed
position property is sticky.
The top, right, bottom, and left properties specify the
position of positioned elements.
The absolutely positioned element is positioned relative to nearest
positioned ancestor (non static). If a positioned ancestor doesn't
exist, the initial container is used.
source:
https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

You can still have absolutely positioned child elements in a div with fixed position, it doesn't have to be specifically relative, it just can't be static, the default value for position
body {
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
}
#outer1 {
height: 100px;
position: fixed;
width: 100%;
}
#outer2 {
height: 900px;
}
#left {
display: inline-block;
}
#right {
display: inline-block;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>