相对定位元素内部的绝对定位元素被裁剪

Question

My question is simple. A relative positioned div has an absolute positioned div as child. This absolute positioned child element gets clipped by the relative positioned element.

I should not make any changes to the relative positioned element, because it is a third party grid control. Changing it breaks the grid layout.

I tried setting overflow:visible on both the relative positioned div element and absolute positioned div element but nothing works.

Can anyone please suggest an idea to overcome this clipping problem?

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

Answer 1

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> 

(Alternatively, you could set the style imperatively in the JavaScript (like childDiv.style="position: absolute; top: 100px;" , but relying on CSS for this is a best practice unless you have a good reason to do otherwise.)