Question

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

一些内容丰富。
固定的全高度和宽度div。

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

如何让滚动条出现在固定的孩子面前？请注意，这是一个更大的项目的简化版本，固定的孩子的CSS理想情况下不应该改变。

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

运行下面的演示。或者如果您愿意，请查看fiddle。

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-index为100且#context没有position已定义属性。

从z-index移除#fixed-child，并向position: relative添加#context属性，使其在源代码文件中的顺序得到遵守，然后{{1}如上所述呈现（我希望:)）。

阅读本文：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

修改

以上链接和https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index应更清楚#context DIV上需要position: relative的原因。

Answer 2

您可以尝试以下Css代码。似乎在chrome中为我工作这是片段

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>

如何让固定容器的滚动条出现在固定的孩子面前？

2 个答案:

修改