嵌套多個div彼此

我有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？

來源

2012-05-25 Carven

步驟1：設置#containerA有position: 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。它可以設置爲相對。

來源

2012-05-25 14:51:29 Ana

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

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

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

來源

2012-05-25 14:34:13

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

來源

2012-05-25 14:34:31 Probocop

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

嵌套多個div彼此

回答

相關問題