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

我的问题很简单。相对定位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是引起您痛苦的原因。

如果您完全否定默认的style属性，将允许您的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/