Absolutely positioned DIV hovering over other elements

Question

I have two JSP pages that are about the same. Each page has an external DIV that has a position / relative property / value. Each page also has an internal DIV, which has an absolute property / position.

On one page, an absolute positioned DIV does not hang over any other elements on the page — it simply stops moving before moving through other elements when the window is resized.

On another page (which has the exact same external DIV and internal properties and DIV values), absolute positioned DIV DOES hover over other elements on the page when I resize the window.

Any thoughts on why this might be happening? I ultimately want both absolute positioned DIVs NOT to hang over any other elements on the page ...

Here's a snippet of markup and css ...

CSS
.BODY_OUTLINE {
position: relative;
border:2px outset white;
border-top: none;
font-style: normal;
margin: 0px;
margin-right:7em;
padding-top:0px;
FONT-FAMILY: arial, tahoma, verdana, sans-serif;
width:100%;
}

HTML
<DIV CLASS="BODY_OUTLINE">
...
<DIV STYLE="border:10px outset gray; position:absolute; right:20%; top:20%;">

Answer 1

Absolutely positioned elements will always hang over other elements on the page, unless these elements themselves are deliberately limited in such a way as to prevent this. This is because absolute elements are outside the stream (i.e., they are ignored by other elements and ignore most other elements, and relative is the parent element, which is an exception).

The fact that you have one page that seems to behave the way you want is probably an “accident." I can’t tell you the exact reason, because you just placed the code for the BODY_OUTLINE wrapper and absolute div, but all other elements and css can also be related to this problem, because, as I said above, other elements must be made to account absolutely positioned element through size, margins, own positioning, or some of them.

Answer 2

It's hard to say, since I have no idea about the other elements on the pages, but I would try to play a little with the z-indexes in my divs:

 .BODY_OUTLINE { position: relative; z-index:999; /* do this for all elements that have position absolute or relative */ } <DIV STYLE="border:10px outset gray; position:absolute; right:20%; top:20%; z-index:1">