框形阴影出现在表格下方

Question

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

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

我不知道为什么会发生这种情况。我错过了什么吗？有什么建议？

Answer 1

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

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

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