How Can I Get My Fixed Container's Scrollbar To Appear In Front Of Its Fixed Child?

I have a fixed, full height and width container. Inside this container are two things: Some overflowing content. A fixed, full height and width div. I'd like for the container's

Solution 1:

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 --><divid="container"><!-- child --><divid="fixed-child"></div><!-- content  --><divid="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>

Solution 2:

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.