CSS重叠浮动

我正在尝试为我正在处理的页面设置一个简单的水平制表符结构,而且我遇到浮动div与z-index相结合的问题.

在浏览器中查看以下代码:

    
    
    



    

        

            LEFT
        
        

            RIGHT
            

            RIGHT
        
        

    

为什么左边的div的橙色边框与右边的div的绿色边框重叠？

z-index属性不适用于静态定位的元素.为了使用z-index,CSS还必须包括静态以外的任何位置值(即相对,绝对,固定).

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

会给你我想要的东西.我添加了位置:相对; 并将.left的z-index更改为3(从2)并将.right的z-index更改为2(从3).

z-index对未定位的元素没有影响(例如position:absolute;)