2

I have a rather weird scenario that I was wondering if it would be possible to overcome.

I have a HTML block element with fixed dimensions which is also styled as "overflow:hidden". I want to position a div which is nested-child of this element at a certain offset. The child div has the same dimensions as its parent. Since the parent is "overflow:hidden" it clips the child div whenever overflows its boundaries. Is there a way to prevent this clipping with some intelligent CSS trickery? 

<div style="background-color:RED; width:100px; height:100px; overflow: hidden; position: relative;">
    <!-- Notice the child is 100 x 100 px and is clipped by the parent's overflow:hidden; styling-->
    <div style="background-color:BLUE; width:100px; height:100px; position: absolute; top: 70px;left: 70px; z-index: 1000;"></div>
</div>

I am limited by certain constraints and cannot loose the "overflow:hidden;" setting on the parent or break the parent-child DOM relationship between the two elements. Positioning the child as "position:fixed" is also not an option.

Here's the link to JSFiddle that shows the problem.

Ashwin Prabhu
  • 9,285
  • 5
  • 49
  • 82
  • Please check this http://jsfiddle.net/FLRu2/3/. I have removed `position:relative` from parent `div`. – Pugazh Feb 27 '14 at 05:57
  • Can you give some more information about the constraints that are limiting you? Without knowing why you have to enforce the constraints we can't recommend any trickery to solve your problem. – turing_machine Feb 27 '14 at 05:58
  • @SyncCircles :) Thanks, but unfortunately that too isn't an option, since the parent element too is positioned. – Ashwin Prabhu Feb 27 '14 at 06:00
  • @turing_machine The element markup is converted to menu systems by the scripts on the page. The heirarchy of the elements is translated into menu's and submenus. If one of the element is styled "overflow:scroll", showing its child menu item at the bottom right corner becomes a challenge. – Ashwin Prabhu Feb 27 '14 at 06:03

2 Answers2

4

No, the very definition of overflow: hidden, that being that an element clips its contents, does not allow this. You must choose one of the options you have listed.

You could alternatively clone the child element and position it such that it sits in the exact same position as the original element, but for pages with many elements or scenarios where the child elements have to move or otherwise change and the clones have to keep up with the originals, this may not be feasible.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
2

Two ideas for you:

  1. Experiment with the overflow: initial property. I don't know what specific layout you have, however initial will set a css value to it's default, even if another rule is cascading over it. See this example: http://www.w3schools.com/cssref/css_initial.asp. Warning: Not IE friendly.

  2. See if using clearfix would still satisfy your constraints. Two examples posted below.

What is a clearfix?

Make child visible outside an overflow:hidden parent

Community
  • 1
  • 1
turing_machine
  • 473
  • 3
  • 13