具有绝对位置的CSS力div位于具有静态位置的div后面

Question

所以可以说我有一些文件

  #a{width: 10px; height: 10px; background: red; z-index: 10;} #b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}

  <body> <div id="a">foo</div> <div id="b">bar</div> <body>

#b div覆盖#a ，因为#b具有absolute位置。

如何在不更改#a位置的情况下强制#b落后#a ？

Answer 1

您可以添加position: relative对于#a元素的position: relative 。

Answer 2

您必须在第一个div上设置除static以外的position才能应用z-index样式

 #a { width: 100px; height: 100px; background: red; z-index: 10; position: relative; } #b { width: 100%; height: 100%; background: black; z-index: 5; position: absolute; left:0; top:0; }

 <div id="a">foo</div> <div id="b">bar</div>

Answer 3

您应该在第一个div中添加相对位置：

<body>
    <div id="a">foo</div>
    <div id="b">bar</div>
<body>
<style>
    #a{width: 10px; height: 10px; background: red; z-index: 10; position:relative}
    #b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
</style>

具有绝对位置的CSS力div位于具有静态位置的div后面

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-02-21 13:59:13

解决方案2
2 2017-02-21 14:00:39

解决方案3
2 2017-02-21 14:00:43

具有绝对位置的CSS力div位于具有静态位置的div后面

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-02-21 13:59:13

解决方案2 2 2017-02-21 14:00:39

解决方案3 2 2017-02-21 14:00:43

解决方案1
3 已采纳 2017-02-21 13:59:13

解决方案2
2 2017-02-21 14:00:39

解决方案3
2 2017-02-21 14:00:43