2012-05-25 93 views
0

我有3 div集裝箱,即#containerA,#containerB#containerC嵌套多個div彼此

我想在#containerA之內定位#containerB並且相對於 #containerA的座標。所以,我設置#containerA有位置: 相對和#containerB有position: absolute。通過這種方式:

#containerA { 
    position: relative; 
} 
#containerB { 
    position: absolute; 
} 

這工作#containerA#containerB之間的罰款。現在,我想要 使#containerC#containerB之內並且相對於#containerB。但是,將 #containerB設置爲position: relative會導致#containerB相對於#containerA丟失 。該代碼看起來是這樣的:

#containerA { 
    position: relative; 
} 
#containerB { 
    position: relative; 
} 
#containerC { 
    position: absolute; 
} 

那麼,究竟應該怎樣做才能讓divs窩在彼此在#containerC定位相對於#containerB#containerB定位相對於這樣的 方式#containerA

回答

1

步驟1:設置#containerAposition: relative;;然後#containerB#containerC具有position: absolute;

步驟2:您現在的位置#containerB使用,比方說left: 10px;top: 20px;(只是例子,你可以替換任何你想要的值)。

步驟3:比方說,你要放置#containerC是從的#containerB左頂部和爲5px 5px的。然後你設置left: 5px;top: 5px;

測試:http://dabblet.com/gist/2788586 - 青色背景元素有position: static。它可以設置爲相對。

0

position:relative用於設置原點使用position:absolute的項目。

如果你想B相對於A,那麼A將使用position:relative,那麼B將在A內部與position:absolute。您還應指定位置:頂部,左側或底部,右側。

<div id="A"> 
    <div id="B"></div> 
</div> 
0

你可以把它作爲position: absolute#containerB,然後#containerC設置position: absolute將它定位相對#containerB

+0

假設我有'#containerD'的後續div。我做*不*希望它被定位爲'#containerC'我希望'#containerD'自己定位。如果我將'#containerD'設置爲'position:relative'來重置它的相對性,那會是對的嗎? – Carven