相對定位元素內部的絕對定位元素被裁剪

Question

我的問題很簡單。 相對定位div具有絕對定位div作為子級。 該絕對定位的子元素被相對定位的元素剪裁。

我不應該對相對定位的元素進行任何更改，因為它是第三方網格控件。 更改它會破壞網格布局。

我嘗試在相對定位的div元素和絕對定位的div元素上設置overflow:visible ，但是沒有任何效果。

任何人都可以提出一個解決此裁剪問題的想法嗎？

 <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

編輯：我已經編輯了代碼段，以顯示一種將文本包裝在td元素中的方法，以防萬一這是您要完成的工作。

---

如果您不能直接編輯子div的HTML，則可以使用JavaScript更改其屬性。 值為-100px的style屬性的left屬性是造成您痛苦的原因。

如果您完全否定默認樣式屬性，則將允許您的CSS接管樣式，而div將由您決定。

嘗試類似：

 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> 

（或者，您可以在JavaScript中強制設置樣式（例如childDiv.style="position: absolute; top: 100px;" ，但是除非有充分的理由，否則依賴CSS是一種最佳做法。）