绝对定位的 DIV 悬停在其他元素上

Question

我有两个几乎相同的 JSP 页面。每个页面都有一个具有“位置：相对”属性/值的外部 DIV。每个页面还有一个内部 DIV，该 DIV 具有“位置：绝对”属性/值。

在一个页面上，绝对定位的 DIV 不会悬停在页面上的任何其他元素上 - 它只是在我调整窗口大小时在移动到其他元素上之前停止移动。

在另一个页面上（具有完全相同的外部 DIV 和内部 DIV 属性和值），当我调整窗口大小时，绝对定位的 DIV 确实会悬停在页面上的其他元素上。

对为什么会发生这种情况有任何想法吗？我最终希望两个绝对定位的 DIV 都不要悬停在页面上的任何其他元素上...

这是所涉及的标记和 css 的 sn-p...

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

很难说，因为我不知道页面上的其他元素，但我会尝试在你的 div 上使用 z-indexes：

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

Answer 2

如果这些元素本身没有特别限制以防止它发生，那么绝对定位的元素将始终“悬停”在页面上的其他元素上。这是因为 absolute 元素不流畅（也就是说，它们被其他元素忽略，并且它们本身也忽略了大多数其他元素；relative 定位的父元素是一个例外）。

您有一个页面似乎按照您的意愿行事，这可能是“意外”造成的。我不能告诉你确切的原因，因为你只发布了 BODY_OUTLINE 包装器和 absolute div 的代码，但所有其他项目和 css 也可能与这个问题有关，因为正如我上面所说，其他元素必须通过大小、边距、自身定位等来说明绝对定位的元素。