title: Semi-Transparent elements always appear on top in Chrome
body: <p>I have a <code>position:sticky</code> header on my website, and a disabled <code>select</code> element below it.
  When I scroll down, so that the disabled <code>select</code> should be underneath the header, it appears on top of the header instead:</p>
  <p><a href="https://i.stack.imgur.com/Bw7Gy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bw7Gy.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/vmjBN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vmjBN.png" alt="enter image description here" /></a></p>
  <p>It seems to be happening with any element whose opacity is not 1, and the default style of a <code>disabled</code> select in Chrome is with partial opacity. This issue does not reproduce in Firefox.</p>
  <p>How can I fix it, besides setting the opacity of the select to 1?</p>