z-index无法与溢出重叠和滚动条一起使用

Question

I got the following issue:

I'm trying to display a few <div.content> with content in it. Limited in size to a <div.holder> as parent with overflow set, so that you can scroll down to see all <div.content> . The <div.content> are overlapping the <div.holder> for styling purpose. And everything is wrapped in a <div.container> .

But the <div.content> won't display over the <div.holder> element with z-index or anything. It's rendered inside the <div.holder> element, without scrollbar it's rendered outside, like i want.

How can i get the Scrollbar and that the <div.content> will overlap its parent <div.holder> ?

Here's the Fiddle for the issue. Thank you.

EDIT:

Trying to accomplish this:

For this styling purpose:

Is this even possible? I'm not bound to just use HTML&CSS, just need that thing start working.

Answer 1

Z-index will only work on elements with position. So its not doing anything to .foo http://www.w3schools.com/cssref/pr_pos_z-index.asp