如何在父元素的范围内强制使用绝对定位的子元素

Question

如何在父元素的范围内强制子html元素，这样即使绝对定位的子元素仍然保留在其中的边界（或被剪裁）内父元素。

我这样做是因为我希望通过绝对定位的元素阻止子内容的作者“覆盖我的页面内容”。

我不想使用iframe。我最好的解决方案是使用javascript查找样式位置设置为“绝对”或“固定”的所有子元素，并将它们转换为“静态”，但我还是喜欢更好的方法，最好是非javascript方法。任何帮助都是很好的帮助。

注意：为父元素设置 style =“position：relative;”只能解决 style =“position：absolute;”的子元素，而不是风格= “位置是：固定;”

Answer 1

如果父元素具有position：relative set，则其中position：absolute的所有子元素都将位于父元素的边界内。

这样：

<div style="position:relative; width:400px; height:400px;">
    <div style="position:absolute; left:190px; top:190px; width:20px; height:20px;">
</div>

会给你一个20px的正方形，绝对位于400px的范围内。

如果你想剪辑，你可能不得不使用overflow：hidden，并且可能使用z-index。你想要剪辑的div可能需要有z-index：-1。