方框阴影出现在表格下方

Question

我有一个响应式流体布局，将页面分为顶部和底部两个部分，每个部分高度为 50%，父部分高度为 100%。顶部是应用了 box shadow css 的图像的包装器，下面是带有 overflow:auto 的内容 div。

我遇到的问题是，如果在下面的内容 div 中有一个表单，并且当滚动时，表单会出现在阴影上方。我不确定我是否正确解释了这一点。但我为演示目的制作了一个演示小提琴 - JSFIDDLE

我不知道为什么会这样。我错过了什么吗？有什么建议么？

Answer 1

尝试将position: relative; 添加到.weirdbox

有关工作示例，请参阅 Fiddle。

z-index 属性仅适用于绝对或相对定位的元素。