How to force even absolutely positioned child elements within the bounds of a parent element

Question

How to force child html elements inside the bounds of a parent element, such that even absolutely positioned child elements still remain within the bounds (or are clipped) of the parent element.

I am doing this because I want to prevent authors of child contents from "Overriding my Page Content" with absolutely positioned elements.

I don't want to use iframe. My best solution is to use javascript to find all child elements with style position set to "absolute" or "fixed" and convert them to "static", howevever i'll like a better approach preferably non-javascript approach. Any help is good help.

NB: setting style="position:relative;" for parent element only solves it for child elements with style="position:absolute;", and not style="position:fixed;"

Answer 1

if the parent element has position: relative set, any children inside with position: absolute will be positioned within the bounds of the parent element.

so:

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

would give you a 20px square absolutely positioned within the bounds of the 400px square.

if you want to clip, you'll probably have to use overflow: hidden, and possibly play with the z-indexes. the divs you want to clip may need to have z-index: -1.