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是最佳实践）。

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

1 个答案: