Question

我有两个大致相同的JSP页面。每个页面都有一个具有“position：relative”属性/值的外部DIV。每个页面还有一个内部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定位的父元素是异常）。

你有一个看起来像你想要的页面的事实可能是“意外”。我无法告诉你确切原因，因为你只发布了BODY_OUTLINE包装器和absolute div的代码，但所有其他项和css也可能与此问题相关，因为，as as我在上面说过，其他元素必须通过大小，边距，自身定位或其他一些因素来解释绝对定位的元素。

Answer 2

很难分辨，因为我不知道页面上的其他元素，但我会尝试在你的div上使用z-index播放一下：

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

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

2 个答案: