css - 没有绝对和没有背景的结束

Question

是否可以在没有背景且没有绝对位置的情况下将一个 div 放在另一个 div 上？这是一个简化的响应式设计。内容会改变的宽度是%。所以在这种情况下，我认为我不能使用绝对定位？有没有办法把 div 放在其他的上面？

这里我使用相对定位，但 z-index 似乎不起作用。我不明白为什么？

这是播放的示例：http: //jsfiddle.net/WMXMW/1/

CSS：

#content{
    margin:0 auto;
    width:40%;
    overflow:hidden; /* a way of clearing float */
    text-align:center;
}

#text{
    margin:0 auto;
    text-align:justify;
}

#menuTrans{
    position:relative;
    margin:0 auto;
    z-index:1;
    display:inline-block;
}
#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:blue;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    z-index:0;
    background:red;
}



#menu{
    margin:0 auto;
    z-index:0;
    display:inline-block;
}
#blue{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:blue;
}
#red{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:red;
}

HTML：

<div id="content">
    <div id="text"> 
        some text some text some text  
        some text some text some text
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
        some text some text some text 
    </div>   
    <div id="menu"> 
        <div id="red"> </div>
        <div id="blue"> </div>
    </div>

    <div id="menuTrans"> 
        <div id="redTrans"> </div>
        <div id="blueTrans"> </div>
    </div>
</div>

Answer 1

如果你知道元素的宽度，你可以给它们一个负边距。稍后在 DOM 中出现的元素将位于顶部。

#blueTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:blue;
    margin-left: -50px;
}
#redTrans{
    float:left;
    width:50px; height:50px;
    opacity:0.5;
    background:red;
    margin-left: -50px;
}

http://jsfiddle.net/WMXMW/2/

Answer 2

您需要将元素移动到您想要的位置。如果你使用相对位置，你可以通过设置一个左负值来做到这一点：

#menuTrans{
  position:relative;
  left: -100px;
[...]

为了控制哪个在顶部，你还需要给出#menu一个相对位置——或者实际上是静态以外的任何位置——这样 z-index 就可以工作了。