沒有絕對，沒有背景

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/