我的问题很简单。相对定位的 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>
最佳答案
编辑:
我已经编辑了代码片段以展示一种将文本包装在 td
元素中的方法,以防这是您想要完成的。
如果您不能直接编辑子 div 的 HTML,您可以使用 JavaScript 更改其属性。 style
属性的 left
属性的值为 -100px
是导致您痛苦的原因。
如果您完全否定默认样式属性,您的 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 是最佳实践,除非你有充分的理由不这样做。)
关于javascript - 相对定位元素内的绝对定位元素被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57820439/