Css: How to Have Position:Absolute Div Inside a Position:Relative Div Not Be Cropped by an Overflow:Hidden on a Container

CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:

Sample Image

And here is the full code with this change:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

Absolute position and Overflow:hidden

It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.

See: http://jsfiddle.net/thirtydot/TFTnU/

HTML:

<div id="parent">
    <div id="hideOverflow">
        <div style="width:1000px;background:#ccc">sdfsd</div>
    </div>
  <div id="child">overflow "visible"</div>
</div>

CSS:

#parent {
    position:relative;
    background:red;
    width:100px;
    height:100px
}
#child {
    position:absolute;
    background:#f0f;
    width:300px;
    bottom: 0;
    left: 0
}
#hideOverflow {
    overflow: hidden
}

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px
}

#child {
  position: absolute;
  background: #f0f;
  width: 300px;
  bottom: 0;
  left: 0
}

#hideOverflow {
  overflow: hidden
}

<div id="parent">
  <div id="hideOverflow">
    <div style="width:1000px;background:#ccc">sdfsd</div>
  </div>
  <div id="child">overflow "visible"</div>
</div>

Position absolute div hides after going outside of its parent container and into another container

it's not about z-index. Your selection is hiding because the container of your table has overflowY hidden:

.hkMDrI {
    position: relative;
    width: 100%;
    border-radius: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
}

So you won't be able to see what is hide outside the height of that div.

Width your current html I don't think it has any solution unless you don't need scrolling with that table, which I doubt.

Changing the html I would place your .dropdown-menuoutside the scrolling div however you will need javaScriptto position the element the right place, under the arrow icon.

Absolute positioned element inside relative positioned element gets clipped

EDIT:
I've edited the snippet to show a way to wrap the text in the td element in case this is what you were trying to accomplish.

If you can't edit the HTML of the child div directly, you can change its attributes with JavaScript. The style attribute's left property having a value of -100px is what's causing your pain.

If you negate the default style attribute entirely, your CSS will be allowed to take over the styling, and the div will be at your mercy.

Try something like:

const childDiv = document.getElementsByClassName("child")[0];childDiv.style = "";

.parent {  position: relative;  border: 2px solid black;  width: 300px;  height: 300px;  overflow: visible;}
.child {  position: absolute;  border: 2px solid black;  overflow: visible;  top: 100px;}
.child td{  width: 100px;  white-space: normal;}

<div style="width:300px;height:300px;border:2px solid black;">  <div class="parent" style="position:relative;left:200px;width:300px;height:300px;border:2px solid black;overflow:hidden;">    Relative Parent    <div class="child" style="position:absolute;left:-100px;border:2px solid black;">      <table>        <tbody>          <tr>            <td>              Absolute positioned div element            </td>          </tr>        </tbody>      </table>    </div>  </div></div>

Can position:absolute elements somehow poke out of overflow:hidden containers?

No, you would have to set the height / width to the contents instead of the .wrap element itself. A solution would be an inner div next to .thing.

Why does the absolute positioning (position:absolute) cannot be placed inside a static parent container?

HTML elements are positioned static by default and static positioned elements are not affected by the top, bottom, left, and right properties so an element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page.

An absolute positioned element will position itself relative to the nearest positioned ancestor and the reason why it can't be relative to a static element parent is because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate pareny and it will have to apply calculations on every element instead of being able to take just shorter paths for static positioning elements.

The use of static positioned elements allows you to have arbitrary elements containers and this let's you have an element to be positionable relative to the element container you wish and not neccerly the intermediate parent.

Css: How to Have Position:Absolute Div Inside a Position:Relative Div Not Be Cropped by an Overflow:Hidden on a Container