How can I get my fixed container's scrollbar to appear in front of its fixed child?

Question

I have a fixed, full height and width container. Inside this container are two things:

1. Some overflowing content.
2. A fixed, full height and width div.

I'd like for the container's scrollbar to appear in front of the fixed div, but am not able to do so.

How can I get the scrollbar to appear in front of the fixed child? Note that this is a simplified version of a much larger project, and the fixed child's CSS should ideally not change.

Also, the content should remain behind the fixed child, and the scrollbar should be of the container, not of the window.

Run the demo below. Or check the fiddle if you prefer.

body {
  font-family: "sans-serif";
  font-size: 65px;
}

#container {
  position: fixed; /* can be changed to absolute if needed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  z-index: 200;
}


/* this child shouldn't change, though if it's the only way I'd be open to it */

#fixed-child {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(90, 70, 60, 0.9);
  z-index: 100;
}

<!-- container -->
<div id="container">

  <!-- child -->
  <div id="fixed-child"></div>

  <!-- content  -->
  <div id="content">
    <div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Duo Reges: constructio interrete. Deinde dolorem quem maximum? Ut alios omittam, hunc appello, quem ille unum
        secutus est. Post enim Chrysippum eum non sane est disputatum. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Bonum integritas corporis: misera debilitas. Graece donan, Latine voluptatem vocant. </p>

      <p>Quid enim de amicitia statueris utilitatis causa expetenda vides. Ex rebus enim timiditas, non ex vocabulis nascitur. Sit enim idem caecus, debilis.</p>

      <p>Primum cur ista res digna odio est, nisi quod est turpis? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Si enim, ut mihi quidem videtur, non explet bona naturae voluptas, iure praetermissa est; Quoniam, si dis placet,
        ab Epicuro loqui discimus. Cyrenaici quidem non recusant; Cur id non ita fit? </p>

      <p>Ego vero isti, inquam, permitto. Quae similitudo in genere etiam humano apparet. Quod autem ratione actum est, id officium appellamus. Non pugnem cum homine, cur tantum habeat in natura boni; Qua tu etiam inprudens utebare non numquam. Hinc ceteriparticulas
        arripere conati suam quisque videro voluit afferre sententiam. Huius ego nunc auctoritatem sequens idem faciam. Philosophi autem in suis lectulis plerumque moriuntur. </p>

    </div>
  </div>

</div>

Answer 1

See https://jsfiddle.net/cmzbq31a/1/

The #fixed-child was being rendered above #content because they were in the same stack context, #fixed-child had a z-index of 100 and #context didn't have a position property defined.

Removing the z-index from #fixed-child, and adding a position: relative property to #context, makes their order in the source code file be observed, and then #context is rendered above as you wanted (I hope :) ).

Read this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Edit

The above link and https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index should be more clear about why position: relative was needed on the #context DIV.

Answer 2

You can try the following Css code. Seems to be working for me in chrome here is the snippet

body {
  font-family: "sans-serif";
  font-size: 65px;
  overflow-x: hidden;
}

#container {
  position: absolute; /* can be changed to absolute if needed */
  top: 0;
  left: 0;
  overflow-y: auto;
  z-index: 200;
}


/* this child shouldn't change, though if it's the only way I'd be open to it */

#fixed-child {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(90, 70, 60, 0.9);
  z-index: 100;
}

<!-- container -->
<div id="container">

  <!-- child -->
  <div id="fixed-child"></div>

  <!-- content  -->
  <div id="content">
    <div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Duo Reges: constructio interrete. Deinde dolorem quem maximum? Ut alios omittam, hunc appello, quem ille unum
        secutus est. Post enim Chrysippum eum non sane est disputatum. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Bonum integritas corporis: misera debilitas. Graece donan, Latine voluptatem vocant. </p>

      <p>Quid enim de amicitia statueris utilitatis causa expetenda vides. Ex rebus enim timiditas, non ex vocabulis nascitur. Sit enim idem caecus, debilis.</p>

      <p>Primum cur ista res digna odio est, nisi quod est turpis? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Si enim, ut mihi quidem videtur, non explet bona naturae voluptas, iure praetermissa est; Quoniam, si dis placet,
        ab Epicuro loqui discimus. Cyrenaici quidem non recusant; Cur id non ita fit? </p>

      <p>Ego vero isti, inquam, permitto. Quae similitudo in genere etiam humano apparet. Quod autem ratione actum est, id officium appellamus. Non pugnem cum homine, cur tantum habeat in natura boni; Qua tu etiam inprudens utebare non numquam. Hinc ceteriparticulas
        arripere conati suam quisque videro voluit afferre sententiam. Huius ego nunc auctoritatem sequens idem faciam. Philosophi autem in suis lectulis plerumque moriuntur. </p>

    </div>
  </div>

</div>