0

I have a container div with overflow:hidden wrapping a bunch of smaller divisions. They all have z-index: 1 including the container. All are positioned fixed.

When I change the size of the smaller divisions, overflow works fine and clips the smaller divisions that would exceed the container's boundary (fig. 1).

With jQuery, I change the z-index of the container to bring it forward, and everyone follows except that the container's overflow stops working. The inner divs overflow. (fig. 2)

Link to screencap.

And when I return the container to z-index:1, it and its children go back behind the other page elements where they should be. No problem with z-index.

Except that overflow remains broken. (fig. 3)

I've tried directly re-issuing an overflow:hidden to the container, using classes to set overflow and z-index, and nothing seems to work. Has anyone encountered something like this?

Edit: This only happens in Chrome - all work fine in Safari - not Moz-proof yet.

Michel
  • 45
  • 8
  • According to http://stackoverflow.com/a/12463736/711902, `overflow: hidden` shouldn't work at all for fixed-position elements. Are child elements' positions fixed or absolute? You probably want the parent to have fixed position, and child elements to have absolute position. – Trevor Dixon May 29 '13 at 21:36
  • Thanks Trevor. Will see if I can have my setup with child position absolute - but I'm pretty sure I've tried just about every position combo possible... – Michel May 30 '13 at 18:29
  • ...60 seconds later: it totally solved it! Apparently that's one combination I hadn't tried. – Michel May 30 '13 at 18:32

1 Answers1

0

Make the children position: absolute, but keep the parent position: fixed. The children will stay put when you scroll, but it will allow the parent's overlow: hidden property to clip the children out of view.

Trevor Dixon
  • 23,216
  • 12
  • 72
  • 109