z-index not working with overflow to overlap and scrollbar

TaifialaVew

New Member
I got the following issue:I'm trying to display a few \[code\]<div.content>\[/code\] with content in it. Limited in size to a \[code\]<div.holder>\[/code\] as parent with \[code\]overflow\[/code\] set, so that you can scroll down to see all \[code\]<div.content>\[/code\]. The \[code\]<div.content>\[/code\] are overlapping the \[code\]<div.holder>\[/code\] for styling purpose. And everything is wrapped in a \[code\]<div.container>\[/code\].But the \[code\]<div.content>\[/code\] won't display over the \[code\]<div.holder>\[/code\] element with \[code\]z-index\[/code\] or anything. It's rendered inside the \[code\]<div.holder>\[/code\] element, without scrollbar it's rendered outside, like i want.How can i get the Scrollbar and that the \[code\]<div.content>\[/code\] will overlap its parent \[code\]<div.holder>\[/code\]?Here's the Fiddle for the issue. Thank you.EDIT:Trying to accomplish this:
b1DZt.png
For this styling purpose:
WAclE.png
Is this even possible? I'm not bound to just use HTML&CSS, just need that thing start working.
 
Top