CODEWITHSUNDEEP
htmlcss
Dimitar Christoff
Dimitar Christoff

Reputation: 26165

Nested elements with absolute position in a overflown element bleed out and show

This is somewhat annoying. Not sure if it's my fault or if this is a browser bug - both FF and Chrome seem to do it so...

here's the JS fiddle: http://jsfiddle.net/dimitar/UF8n3/

the premise:

div with overflow-y: auto

child divs within that, appear fine

children of the child divs (div.collectibleMiniHead) with position: absolute but no left/top values (so relative, really) don't remain hidden but are being shown.

I can refactor to use position: relative and it works but this does not make the bug/behaviour go away - is this normal / expected, shall I bother submitting it to the mozilla and webkit bugtrackers or am I just doing something wrong?

Upvotes: 1

Views: 855

Answers (2)

thirtydot
thirtydot

Reputation: 228152

I changed all four instances of

<div style="background:..height: 94px;" /></div>

to 

<div style="background:..height: 94px;"></div>

because self-closing and then having another closing tag didn't seem to make much sense.

However, that didn't change anything.

You said:

children of the child divs (div.collectibleMiniHead) with position: absolute but no left/top values (so relative, really)

and

I can refactor to use position: relative and it works but this does not make the bug/behaviour go away

Simply adding position: relative to div.collectibleMini makes it work as I think you want it to, and doesn't require much work in refactoring.

Live Demo (also with self-closing divs fixed)

I think I've either elegantly solved your problem, or alternatively I've got completely the wrong end of the stick. Here's hoping for the former!

Upvotes: 1

naiquevin
naiquevin

Reputation: 7796

Try adding collectibleMiniHead as a child of collectibleMiniBody and position: relative; on collectibleMiniBody

Upvotes: 0

Related Questions