如何強制父元素的範圍內，甚至絕對定位的子元素

Question

如何強制子html元素一個父元素的範圍內，這樣，即使是絕對定位的子元素仍然保留的範圍內（或被剪裁）父元素。

我這樣做是因爲我想阻止作者子內容從「覆蓋我的頁面內容」與絕對定位的元素。

我不想使用iframe。我最好的解決方案是使用JavaScript來查找樣式位置設置爲「絕對」或「固定」並將它們轉換爲「靜態」的所有子元素，但我會喜歡更好的方法，最好是非JavaScript方法。任何幫助都是很好的幫助。

注意：設置style =「position：relative;」爲父元素只解決它的子元素與style =「position：absolute;」，而不是style =「position：fixed;」

Answer 1

如果父元素具有position：relative set，那麼位置爲absolute的任何子元素都將位於父元素的邊界內。

這樣：

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

會給你絕對定位的400像素平方米的範圍內的20像素的正方形。

如果你想剪輯，你可能不得不使用overflow：hidden，並可能使用z-indexes。您要剪輯的div可能需要具有z-index：-1。