Is it possible to show an inner-div "on top" of a div that is set to overflow:hidden?

Question

Is it possible to show an inner-div "on top" of a div that is set to overflow:hidden?

Something like:

<div style="position:relative;overflow:hidden;" id="container">
   <div style="position:absolute;left:-15px;width:100px;height:100px;" class="product">product1</div>
   <div class="product-popup">Product1 price etc</div>
   <div style="position:absolute;left:10px;width:100px;height:100px;" class="product">product2</div>
   <div class="product-popup">Product2 price etc</div>
</div>

When viewing the page the products are not visible outside the boundaries of the #container-div. When I click the div with class product-popup I want to show the popup outside the boundaries of #container-div. Is this possible?

Answer 1

Simple answer, you cant.

If you're setting overflow:hidden on the parent, it will do just that to any overflow so so not show the child.

You may need to think about what you're trying to accomplish and why.

In order to correctly show child content outside the defined boundaries of a parent, consider giving the parent fixed height/width (optional) with a position of relative. The child should be positioned absolutely within this, but can be placed outside its limits. It will display as long as overflow:hidden isnt set on the parent, and the child's position remains within the browser viewport.

See this FIDDLE for examples of how overflow and positioning work together.

If you're desperate to maintain overflow:hidden on the content within your container, simply nest another wrapper within it, e.g.

Demo Fiddle

HTML

<div class='parent'>
    <div class='content'>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>content
        <br>
    </div>
    <div class='popup'></div>
</div>

CSS

body {
    padding:50px;
}
.parent {
    position:relative;
    height:100px;
    width:100px;
    border:1px solid red;
}
.content {
    overflow:hidden;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid blue;
}
.popup {
    top:-20px;
    left:-20px;
    height:20px;
    width:20px;
    position:absolute;
    border:1px solid green;
}