Color-contrast issue with element stack

[straker]

Our grid code seems to miscalculate the element stack levels. Take the following HTML:

<div id="opacity-parent" style="opacity: 0.9;">
  <div id="z-index" style="position: relative; z-index: 2">
   <h1 id="target">Hello World</h1>
  </div>
</div>
<div id="opacity-oos" style="opacity: 0.8;">
  <div id="absolute" style="position: absolute; top: 20px; z-index: -1;">
    <div id="red" style="height: 40px; width: 100vw; background: red"></div>
  </div>
</div>

Which results in a stack of:

[
  h1#target
  div#z-index
  div#opacity-parent
  div#red
  div#absolute
  main
  body
  html
]

Which is incorrect as the red background should be on top of the target h1. The stacking order our code produces is:

[
  [0,2,0],
  [0,2,0],
  [0,0],
  [0,-1,0],
  [0,-1,0],
  [0],
  [0],
  [0]
]

From the stacking order code, it looks like we need to create a stacking layer first before applying z-index. That would allow the opacity to create it's own stacking context before the positioned elements change it based on z-index.