没有绝对，没有背景

Question

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

在这里我使用相对定位，但Z指数似乎并没有工作。我不懂为什么？

这里的例子来打：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

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

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

而且控制哪一个是在顶部，你需要给#menu也是相对的位置真的 - 或者任何其他比静态 - 所以Z指数将工作。

Answer 2

如果你知道元素的宽度，你可以给他们一个负边距。 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/