Question

Is there a way to prevent an absolutely placed image from extending into certain elements?

The reason: I allow my users to customize their websites by adding images. But it’s possible for them to place the image in such a way that it covers the form buttons – then they can’t remove it again.

#parent{
    position:relative;
}

#my_img {
    position:absolute; 
    # top, left can be anything
}


<div id = "parent">
    <img id = "my_img" src = "my_pic.jpg" >
</div>
<div id = "other_div">
    I always want to see this text regardless of my_img top and left
</div>

Answer 1

The determine in which order the elements of your html get laid out other than the document strucutre you need to position your element (relative, absolute or fixed) and give the element a z-index value.

Also you need to assign atleast top/bottom and left/right to positioned elements to prevent problems in older IE versions.

#other_div {
    position: relative;
        top: 0;
        left: 0;
    z-index: 1337;
}