Allow specific tag to override overflow:hidden

Question

I've got a <div>, that's a certain height and width, and overflow:hidden so that specfic inner images are clipped; however I want one image in the <div> to pop out of the border (ie to override the overflow:hidden), how do I do this?

Answer 1

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 2

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

Set the child to have position of fixed and use margins instead of top and left to position it.

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