5

我正在创建一个网页，并且我有两个divs，例如 A 和 B。A 的位置是fixed并且它在页面顶部，但 B 的位置是absolute并且在页面中间的某个位置。当它们重叠时，B 位于 A 之上，但我希望这是相反的。我希望 A 能够胜过任何事情，但我不知道该怎么做。

请注意，改变他们的位置不是一种选择。

先感谢您。:)

4

6 回答 6

5

您可以使用z-indexcss 设置来修改非静态定位元素顺序：

div#A { z-index: 2; }
div#B { z-index: 1; }

A 将显示在 B 上。

于 2013-03-15T19:15:46.980 回答
3

使用 z-index 值将它们相应地调整为图层。它是一个样式属性：style="z-index:200"....

于 2013-03-15T19:15:06.453 回答
2

注意：z-index 仅适用于定位元素（position:absolute、position:relative或position:fixed）。

<html>
  <div id="divA" style="width:100%; height:50px; z-index:2; position:fixed; background-color: red">
  </div>
  <div id="divB" style="width:100%; height:50px; z-index:1; position:absolute; top:30px; left:20px; background-color:green ">
  </div>
</html>

divA 现在将位于 divB 之上（由于 z-index 属性）。但请确保为 div 定义位置属性。如果我们删除position:fixed for divA，这将不起作用。

于 2013-03-15T19:32:15.983 回答
1

给 A 一个z-index比 B 更大的属性。

div.a {
    z-index:2;
}
div.b {
    z-index:1;
}

您可以在 MDN 上阅读z-index的作用，但简而言之，“当元素重叠时，z-order 确定哪个覆盖另一个。具有较大 z-index 的元素通常覆盖具有较低 z-index 的元素。”

于 2013-03-15T19:15:37.570 回答
1

如果确实存在重叠，您可以使用 css 媒体查询并更改属性值。

或者使用javascript来测试它是否重叠。这是你有一天写的一种方法：https ://github.com/yckart/jquery.overlaps.js

于 2013-03-15T19:19:28.027 回答
1

使用 CSS 为 Div A 提供高 Z-Index。

#a{
  z-index: 100;  
}

这将意味着 Div A 肯定会停留在所有/大多数其他元素之上，值越高，它就越有可能高于其他所有元素，具体取决于页面上有多少其他元素。如果您需要对多个元素进行更精确的重叠控制，请为您的元素分配特定的 z-index 值，该值越高，元素的顶部就越多。您也可以使用负值。

于 2013-03-15T19:30:36.403 回答