Allow specific tag to override overflow: hidden

Question

I have a <div> that has certain height and width , and overflow:hidden , so that limited internal images are cropped; however, I want one image in the <div> go out of bounds (i.e. to override overflow:hidden ), how do I do this?

Answer 1

The trick is to save the overflow:hidden element with position:static and place the overflow element relative to the higher parent (and not the overflow:hidden parent). For example:

 .relative-wrap { /*relative on second parent*/ position: relative; } .overflow-wrap { height: 250px; width: 250px; overflow: hidden; background: lightblue; /*no relative on immediate parent*/ } .respect-overflow { position: relative; top: 75px; left: 225px; height: 50px; width: 50px; background: green; } .no-overflow { position: absolute; top: 150px; left: 225px; height: 50px; width: 50px; background: red; } 

 <div class="relative-wrap"> <div class="overflow-wrap"> <div class="respect-overflow"> </div> <div class="no-overflow"> </div> </div> </div> 

I also want to note that a very common use case for wanting to overflow an element with a container in this way is when you want to animate the height of the drop-down list or container from X to 0 and therefore must have overflow: hidden on the container. Usually you have something inside the container that you want to overflow independently. Since these elements are only available when the container is “open”, you can take advantage of it and set the overflow to visible again after the container is fully opened, and then return it back to hidden before trying to animate the container back to height: 0 .

Answer 2

I know this is an old post, but it can be done (at least in Chrome). I realized this about two years ago, and it saved me a couple of times.

Set the position of the fixed and used fields for the child instead of the top and left positions.

 #wrapper { width: 5px; height: 5px; border: 1px solid #000; overflow: hidden; } #parent { position: relative; } button { position: fixed; margin: 10px 0px 0px 30px; } 

Here is an example: http://jsfiddle.net/senica/Cupmb/

Answer 3

All answers to questions that do not satisfy me. They are, in my opinion, all hacks and complicated in a complex layout.

So here is a simple solution:

Once a parent has a specific overflow, there is no way to allow its children to override this.

If a child needs to redefine parental overflow, then the child may have a different overflow than other children.

So, define an overflow for each child instead , declaring it in the parent :

 <div class="panel"> <div class="outer"> <div class="inner" style="background-color: red;"> <div> title </div> <div> some content </div> </div> </div> </div> .outer { position: relative; overflow: hidden; } .outer:hover { overflow: visible; } .inner:hover { position: absolute; } 

Here is the fiddle:

http://jsfiddle.net/ryojeg1b/1/

Answer 4

You cannot, unless you change your HTML layout and move this image from the parent div. A little more context will help you find an acceptable solution.

Answer 5

You can overflow an element from the immersion by wrapping it in another div, and then set your image as position: absolute; and offset using fields.

 <div class="no-overflow"> <div> <img class="escape" src="wherever.jpg" /> </div> </div> .no-overflow{ overflow:hidden; width: 500px height: 100px } .escape{ position: absolute; margin-bottom: -150px; } 

Example (tested in firefox + IE10) http://jsfiddle.net/Ps76J/

Answer 6

overflow refers to a container that does not allow oversized content to be displayed (if it is hidden). It has nothing to do with internal elements that may have overflow: anything, and still will not be displayed.

Answer 7

The Z-index does not seem to work, but here I have a workaround that works fine for me, since I need an overflow just to be “visible” when the child is frozen:

 #parent { overflow: hidden; } #parent:hover { overflow: visible; } 

Answer 8

All of the above is good, but nothing hits JAVASCRIPT . (Using jquery ). In this way,

 <script> var element = $('#myID'); var pos = element.offset(); var height = element.height(); // optional element.appendTo($('body')); // optional element.css({ position : 'fixed' }).offset(pos).height(height); </script> 

What I am doing is getting the initial position of the element (relative to the page), it is not necessary to get the height or width, it is not necessary to add the element to the body, apply the new css position : fixed rule and finally apply the original position and, possibly, the width and height.

Answer 9

Wrap overflow: hidden div another div that has css property -

transform: translate(0, 0);

and in your special tag so that you redefine it - overflow: hidden , set it with

position: fixed; he will still be relative to his parent

ie -

 .section { ... transform: translate(0, 0); } .not-hidden { position: fixed; ... } 

See the fiddle here

Answer 10

Currently I do not know how to make the parent node with hidden overflow, it has children visible outside of it (except for position:fixed children).

HOWEVER, perhaps instead of using overflow, you can simply use the outline property set to the background color in combination with the z-index property to mask some elements while preserving others.

 .persuado-overflow-hidden { /*gives the appearance of overflow:hidden*/ z-index: -100; position: relative; outline: 1000vw solid white; overflow: visible; } .overridevisible { /*takes the element out of the persuado overflow hidden*/ z-index: 1; } /*does the other styling to the text*/ .loremcontainer { width: 60vw; height: 60vh; margin: 20vw; border: 1px solid; } .loremtxt { width: 100vw; height: 100vh; margin: -20vh; z-index: -1; } .positionmessage { z-index: 100; position: absolute; top: -12vh; left: -5vw; right: -5vw; color: red; } 

 <div class="persuado-overflow-hidden loremcontainer"> <div class="loremtxt"> <div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec. </div> </div>