如何在html中控制div重叠

我正在创建一个网页，并且我有两个'div，例如A和B. 现在A的位置是'固定的'，它位于页面顶部，但B的位置是'绝对'，位于页面中间的某个位置。当它们重叠时，B出现在A之上，但我希望这是另一种方式。我希望A能够超越任何事物，但我不知道该怎么做。如何在html中控制div重叠

请注意，更改其定位不是一种选择。

谢谢您提前。 :)

来源

2013-03-15 Makan Tayebi

看看[这里]（http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap?rq=1），也许它会帮助 – fcm 2013-03-15 19:15:01

使用z-index值将它们相应地调整为图层。它的样式属性：风格=“的z-index：200” ......

来源

2013-03-15 19:15:06

给予更大的z-index财产比B

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

您可以阅读有关z-indexes在MDN做主持，但简而言之，“当元素重叠时，z顺序决定哪一个覆盖另一个元素，具有较大z-索引的元素通常覆盖较低元素。”

来源

2013-03-15 19:15:37 j08691

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

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

A将被显示在B.

来源

2013-03-15 19:15:46 aorcsik

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

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

来源

2013-03-15 19:19:28 yckart

使用CSS给Div A一个高Z指数。

#a{ 
    z-index: 100; 
}

这将意味着一个股利肯定会留在所有/大多数其他的元素，该值越高，就越有可能会高于一切取决于其他因素有多少是在网页上。如果您需要对多个元素进行更精确的重叠控制，请为您的元素指定特定的z-index值，值越高，元素顶部越多。您也可以使用负值。

来源

2013-03-15 19:30:36 GeorgeV

注：z索引仅适用于定位元件（位置：绝对，位置：相对，或位置是：固定）。

<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属性）。但请务必为divs定义职位属性。这不会工作，如果我们删除位置：固定为divA。

来源

2013-03-15 19:32:15 Srikanth

如何在html中控制div重叠

回答

相关问题