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

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 更改其属性。 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 是最佳实践，除非你有充分的理由不这样做。)