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

Question

我有两个几乎相同的 JSP 页面。每个页面都有一个外部 DIV，它具有“position: relative”属性/值。每个页面还有一个内部 DIV，它有一个“position: absolute”属性/值。

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

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

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

这是涉及的标记和 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

绝对定位的元素将始终“悬停”在页面上的其他元素上，如果这些元素本身没有以这种方式特别限制以防止它。这是因为 absolute 元素不在流程中(也就是说，它们被其他元素忽略，并且它们自身忽略大多数其他元素；relative 定位的父元素是一个异常(exception))。

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