Allow specific tag to override overflow:hidden

Question

I\'ve got a

, that\'s a certain height and width, and overflow:hidden so that specfic inner images are clipped

相关标签:

Answer 1

Z-index doesnt seem to work, but here I have a workaround which worked fine for me, as I needed overflow only to be "visible" when hovering a child element:

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

Answer 2

All given answers where not satisfying for me. They are all hackish in my opinion and difficult to implement in complex layouts.

So here is a simple solution:

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

If a child needs to override the parent overflow, then a child can have a different overflow than the other children.

So define the overflow on each child instead of declaring it on 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 a fiddle:

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

Answer 3

Wrap your overflow: hidden div with another div that has a css property of -

transform: translate(0, 0);

and in your specefic tag that you want it to override the - overflow: hidden , set it with -

position: fixed; it will continue to be position relatively to its parent

i.e -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

See the fiddle here

Answer 4

The trick is to keep the overflow:hidden element with position:static and position the overflowing element relative to a higher parent (rather than the overflow:hidden parent). Like so:

.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, a very common use case for the desire to have an element overflow its container in this way is when you want animate the height of a dropdown or container from X to 0, and therefore need to have overflow: hidden on the container. Usually you have something inside the container that you want to overflow regardless. Since these elements are only accessibly when the container is "open", you can take advantage and set the overflow back to visible after the container is fully open, and then set it back to hidden before trying to animate the container back to height: 0.

Answer 5

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

<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/