CSS保證金和絕對財產

我想在我的代碼中使用保證金，但我有一些問題。請看：CSS保證金和絕對財產

<div id="outer"> 
<div id="inner1"> 
    Margin not coming from top (not absolute) 
</div> 

<div id="inner2"> 
    Div has absolue prop 
</div>

而且CSS代碼：

#outer { 
    margin: 100px; 
    background-color: green; 
    height: 300px; 
    widht: 400px; 
} 

#inner1 { 
    margin: 10px; 
    background-color: red; 
} 

#inner2 { 
    position: absolute; 
    margin: 20px; 
    background-color: blue; 
}

我無法理解爲什麼設定位置絕對是限制寬度#inner2 div。
由於#inner1 div沒有絕對屬性，所以從頂部沒有保證金。我無法理解這一點。請解釋。

這裏是輸出：jsFiddle

來源

2012-08-17 sachinjain024

什麼樣的問題是什麼？你期望的結果是什麼？ – Kyle 2012-08-17 07:24:12

我預計我的inner1 div應該有頂部的邊距，就像我在CSS中指定的一樣。但我有不同的東西。使用絕對財產解決這個所以我想知道爲什麼？ – sachinjain024 2012-08-17 08:22:46

Ques1：我無法理解爲什麼設置位置，絕對是制約inner2格的寬度。

設置位置爲inner2 div的絕對位置，所以只要文本長寬自動。設置位置爲inner2 div的相對位置，獲取外部div的寬度。

所以如果你想要絕對定位，還要設置inner2 div的寬度。問題2：由於inner1 div不具有絕對屬性，因此它沒有從頂部開始的餘量。我無法理解這一點。請解釋。

從文檔流程中，您的內部div永遠不會知道它是在某個其他div（外部）中，將border或position設置爲絕對外部div來修復此問題。

小提琴http://jsfiddle.net/C7dE2/20/

來源

2012-08-17 07:44:22

嘿abhinav，謝謝你的回答。我完全理解了Q1的答案。你能說說從文檔流程裏面知道內部div從來不知道它是在外部div裏面但是根據文件流內部div在外部div裏面，而且爲什麼設置外部div的邊界來解決這個問題呢？請指出我的一些鏈接atleast ... BTW非常感謝。 – sachinjain024 2012-08-17 08:26:21

@blunderboy，實際上這是Collapsing Margin的情況。以下是一些鏈接：http://reference.sitepoint.com/css/collapsingmargins，http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php，http：//www.seifi .org/css/understanding-taming-collapsing-margin-in-css.html – 2012-08-17 09:23:40

非常感謝abhinav :) – sachinjain024 2012-08-17 13:14:40

您應該使用綠色div的padding-top財產 - #inner1與margin-top一套高價值的唯一推動整個#outer進一步下跌！

來源

2012-08-17 07:29:07 jOpacic

設置 position:absolute從正常的文檔結構流中移除相關元素。所以除非你明確設定寬度，否則不知道寬度有多大。你可以明確地設定寬度，如果這是你後的效果..

看到這個

absolute vs relative position width & height

來源

2012-08-17 07:33:05 Usman

CSS保證金和絕對財產

回答

相關問題