Абсолютный позиционированный DIV парит над другими элементами

Question

У меня есть две страницы JSP, которые примерно одинаковы. Каждая страница имеет внешний DIV, который имеет свойство/значение position: relative. На каждой странице также есть внутренний DIV, который имеет свойство/значение position: absolute.

На одной странице абсолютный позиционированный DIV не наводится на другие элементы на странице - он просто перестает перемещаться, прежде чем перемещаться по другим элементам при изменении размера окна.

На другой странице (которая имеет те же самые точные внешние DIV и внутренние свойства и значения DIV), абсолютный позиционированный DIV DOES зависает над другими элементами на странице при изменении размера окна.

Любые мысли о том, почему это может происходить? Я в конечном счете, чтобы обе абсолютные позиционированные DIVs НЕ парить над любые другие элементы на странице ...

Вот фрагмент разметки и 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

Абсолютно позиционированные элементы всегда будут нависнуть над другими элементами на странице, если сами эти элементы не будут специально ограничены таким образом, чтобы предотвратить это. Это связано с тем, что элементы находятся вне потока (т. Е. Они игнорируются другими элементами, и они игнорируют большинство других элементов, а исходный родитель является исключением).

Тот факт, что у вас есть одна страница, которая, кажется, ведет себя так, как вы хотите, - это, вероятно, «случайность». Я не могу точно сказать вам причину, потому что вы только разместили код для обертки BODY_OUTLINE и div absolute, но все остальные элементы и css также могут иметь отношение к этой проблеме, поскольку, как я уже говорил, другие элементы имеют для учета абсолютно позиционированного элемента через размер, поля, собственное позиционирование или некоторые из них.

Answer 2

Трудно сказать, так как я понятия не имею других элементов на страницах, но я бы попробовать играть немного с Z-индексов на ваших дивы:

.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">