html - 更多 float 权利问题

Question

这是链接:http://www.whiterootmedia.com/homepage_layout_test/

代码如下:

<div class="site" style="background:yellow;min-width: 577px; "> 

<div class="banner" style="background:blue; height:100px; width:417px; float:left;">Banner   Banner   Banner   Banner   Banner   </div>
<div class="ads" style="background:green; height:800px; width:160px; float:right;">Ads  Ads  Ads  Ads  Ads  Ads  Ads  Ads  Ads  </div>
<div class="tree" style="background:orange; white-space:nowrap; height:400px; width:auto; min-width:417px; clear:left;">Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   Tree   </div>

</div>

当您缩小窗口时，我希望橙色 div 内容不会位于绿色 div 的后面或之上，并且我希望橙色 div 文本将绿色 div 推离屏幕。

尘土飞扬

Answer 1

使用 css 属性“z-index”。

例如:

.onTop {
    z-index: 1;
}
.onBottom {
    z-index: 0;
}

数字越大，元素越“靠前”。