CSS force div with absolute position be behind div with static position

Question

So lets say that I have some document

  #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>

The #b div covers the #a , because #b has absolute position.

How can I force #b be behind #a without changing #a position?

Answer 1

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

Answer 2

You have to set a position other than static to your first div to apply styles like 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

You should add a relative position to your first 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 force div with absolute position be behind div with static position

Question

3 answers

solution1
3 ACCPTED 2017-02-21 13:59:13

solution2
2 2017-02-21 14:00:39

solution3
2 2017-02-21 14:00:43

CSS force div with absolute position be behind div with static position

Question

3 answers

solution1 3 ACCPTED 2017-02-21 13:59:13

solution2 2 2017-02-21 14:00:39

solution3 2 2017-02-21 14:00:43

solution1
3 ACCPTED 2017-02-21 13:59:13

solution2
2 2017-02-21 14:00:39

solution3
2 2017-02-21 14:00:43