位置：繼承與重疊可能嗎？

我想讓兩個正方形在父div中互相重疊。正方形使用position：inherit。請注意，正方形的數量是動態的。另請注意，父div使用margin-left：30％。這可能嗎？位置：繼承與重疊可能嗎？

<div style="border: 1px solid Black; width: 300px; height:300px; margin-left:30%;"> 
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div> 
    <div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div> 
</div>

http://jsfiddle.net/AzYUn/1/

來源

2012-12-17 Skalis

你爲什麼要做'position：inherit'？無論如何，他們繼承了什麼，因爲你甚至沒有在父母上設置任何「職位」？ – BoltClock

究竟是你想要什麼？明確指定 – Milind

我正在創建一個scrum牆。兩個「方塊」的位置從數據庫中檢索，父div是牆壁。我想我需要使用位置繼承，因爲父div沒有絕對定位（牆將在瀏覽器中居中）。 – Skalis

擺脫position: inherit;和使用position: relative;。

使用top,right, bottom和left屬性可以移動元素並使其重疊。

CSS

div.parent { 
    border: 1px solid black; 
    margin-left: 30%; 
    height: 300px; 
    width: 300px; 
} 

div.parent > div.box { 
    height:40px; 
    width:40px; 
    border: 1px solid black; 
} 

div.parent > div.box.overlap { 
    position: relative; 
    top: -40px; 
}

HTML

<div class="parent"> 
    <div class="box"></div> 
    <div class="box overlap"></div> 
</div>

來源

2012-12-17 09:40:17

感謝您的回答。這會給我的解決方案帶來一些壓力，但我開始思考（如你的答案），減去定位是唯一的答案。 – Skalis

@Skalis儘管感覺不對，那就是CSS的工作原理。你只需接受並克服它 - 我確切地知道它的感覺。/hug/ –

我能想到的唯一方法是使用其它位置值 - 相對或絕對的，即使實現這一目標。

來源

2012-12-17 09:41:38 Shlizer

我也這樣傾斜：.. – Skalis

位置：繼承與重疊可能嗎？

回答

相關問題