z-index not working with overflow to overlap and scrollbar

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: Photoshoped result example for the fiddle

For this styling purpose: Use case

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

So you want the scroll bar and the content to overflow it's container? Not sure you can get that functionality. (If I read it correctly) — Christopher Marshall
– Christopher Marshall, Commented Dec 11, 2012 at 23:59
@ChristopherMarshall Like shown in the fiddle, i want to use the scrollbar on the container and the content to overlap the container — Munchies
– Munchies, Commented Dec 12, 2012 at 0:00
You can't do that with css as what you're trying to do is at odds. What's your use case? or Why are you trying to get this functionality? — Christopher Marshall
– Christopher Marshall, Commented Dec 12, 2012 at 0:02
@ChristopherMarshall I Uploaded 2 Pictures to describe my case. I want that div.content to look like they're comming from back to front. — Munchies
– Munchies, Commented Dec 12, 2012 at 0:18
Yes, Fake the background of .holder, just extend the width like 20px for your "ribbon". Exactly like the picture. — Christopher Marshall
– Christopher Marshall, Commented Dec 12, 2012 at 0:54

Jeffha77 · Accepted Answer · 2012-12-12 00:05:33Z

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

answered Dec 12, 2012 at 0:05

Jeffha77

1691 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Munchies Over a year ago

I forgot it on the Fiddle, but it's neither working with position:relative

Collectives™ on Stack Overflow

z-index not working with overflow to overlap and scrollbar

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related