如何在HTML中控制`div`重叠

Question

如何在HTML中控制`div`重叠

csshtmloverlap

5

我正在创建一个网页，其中有两个

元素A和B。其中，A的position属性是fixed，位于页面顶部；而B的position属性是absolute，位于页面中间某处。当它们重叠时，B会遮挡住A，但我希望A始终在最上面，而不知道如何实现。

请注意，更改它们的定位不是一个选项。

谢谢您的帮助。 :)

- Makan

1

看一下这里，或许会有所帮助。 - fcm

6个回答

3

使用z-index值来调整它们的层次。这是一个样式属性：style="z-index:200"。

- Sri Tirupathi Raju

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 属性。如果我们移除 divA 的 position: fixed，这将不起作用。

- Srikanth

1

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

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

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

- j08691

1

使用CSS为Div A设置较高的Z-Index。

#a{
  z-index: 100;  
}

这意味着Div A一定会覆盖其他元素，数值越高，在页面上存在的其他元素越多时，它就越有可能在所有元素之上。如果需要更精确地控制多个元素的重叠，请为您的元素分配特定的z-index值，数值越高，元素就越在顶部。您还可以使用负值。

- GeorgeV

1

你可以使用CSS媒体查询，如果重叠是事实，则更改属性值。

或者使用JavaScript测试是否重叠。这里是我曾经写过的一种方法：https://github.com/yckart/jquery.overlaps.js

- yckart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aorcsik · Accepted Answer

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

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

B之上将显示A。