使用z-index之后，后边的红色背景div 跑到上面怎么解决

Question

<div id="banner" class="cen">
    <div style=" position:absolute; z-index:-10; top:0; left:0"><img src="images/banner.jpg" /></div>
    <div style="position:absolute; z-index:10; top:269px; left:50%;margin-left:-367px;" >
        <p><img src="images/cover.png" /></p>
    </div>
</div><!--banner-->
<div style="background-color:#F00"></div>

使用z-index之后，后边的红色背景div 跑到上面怎么解决，怎样让它像原来没加position和z-index时候一样自己就转到下一行了，不要告诉我用margin-top测距离。。。

Answer 1

给banner一个相对定位