如何让我的固定容器的滚动条出现在其固定的孩子的前面？ [英] 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:
- 一些溢出的内容。
- width div。
我想要容器的滚动条出现在固定div的前面，但是不能这样做。
I'd like for the container's scrollbar to appear in front of the fixed div, but am not able to do so.
如何让滚动条出现在固定的孩子面前？注意，这是一个大得多的项目的简化版本，固定的孩子的CSS应该理想地不改变。
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>
推荐答案
请参阅 https://jsfiddle.net/cmzbq31a/1/
＃fixed-child 正在上面 #content 因为它们在同一个栈上下文中，＃fixed-child 的z索引为100， #context 没有定义位置。
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.
删除 z-index 从＃fixed-child 添加位置：相对 #context ，使它们在源代码文件中的顺序被观察，然后 #context 在上面呈现为你想要的（我希望:)） 。
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 :) ).
上述连结和 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index 应该更清楚为什么<$ c $ #context DIV需要
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.
这篇关于如何让我的固定容器的滚动条出现在其固定的孩子的前面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
