z-index不使用溢出来重叠和滚动条

Question

我遇到了以下问题：

我正在尝试在其中显示一些内容<div.content>。设置为<div.holder>的父级的overflow大小有限，因此您可以向下滚动查看所有<div.content>。 <div.content>与<div.holder>重叠以用于样式目的。所有内容都包含在<div.container>。

中

但<div.content>不会在<div.holder>元素上显示z-index或其他任何内容。它在<div.holder>元素内部呈现，没有滚动条，它在外面呈现，就像我想要的那样。

如何获取滚动条，<div.content>将与其父<div.holder>重叠？

这是该问题的Fiddle。谢谢。

编辑：

尝试完成此任务：

为此造型目的：

这甚至可能吗？我不一定只使用HTML和CSS，只需要开始工作。

Answer 1

Z-index仅适用于具有位置的元素。所以它没有对.foo做任何事情 http://www.w3schools.com/cssref/pr_pos_z-index.asp