如何才能让我的固定容器的滚动条出现在它的固定子的前面？

Question

我有一个固定的，全高度和宽的容器。在这个容器内有两件事：

1. 一些溢出的内容。
2. 一个固定的，完全的高度和宽度的div。

我希望容器的滚动条出现在固定的div前面，但是无法这样做。

如何才能让滚动条出现在固定的孩子面前？请注意，这是一个大得多的项目的简化版本，而固定子的CSS最好不要改变。

另外，内容应该保留在固定子元素后面，滚动条应该是容器的，而不是窗口的。

运行下面的演示。或者，如果您愿意的话，可以检查小提琴。

​

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

请参阅https://jsfiddle.net/cmzbq31a/1/

#fixed-child是在#content之上呈现的，因为它们位于相同的堆栈上下文中，#fixed-child的z索引为100，而#context没有定义position属性。

将z-index从#fixed-child中移除，并向#context添加一个position: relative属性，可以观察到它们在源代码文件中的顺序，然后按照您的意愿在上面呈现#context (我希望:)。

读这个：上下文

编辑

上面的链接和Z-指数应该更加清楚为什么#context DIV需要position: relative。

Answer 2

您可以尝试以下Css代码。似乎是为我工作的铬，这是片段

​

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>

​