絕對vs相對位置寬度和高度

我知道什麼是絕對的&相對位置，但有些點仍然不會被清除。參考絕對vs相對位置寬度和高度

CSS：

.rel{ 
    position:relative; 
    background:red; 
} 
.abs{ 
    position:absolute; 
    background:blue; 
}

HTML：

<div class="rel">rel</div> 
<div class="abs">abs</div>

現在點是：

相對格需要100％的寬度自動但絕對格只需要內容寬度。爲什麼？
當我給高度100％時，相對div沒有效果，但絕對div需要100％高度。爲什麼？
當我給margin-top：30px它是絕對div的轉移，但是當我給頂部：30px然後只有相對的div轉移。爲什麼？
當我不給top:0 , left:0絕對div它需要高於div高度。爲什麼？

來源

2011-03-16 sandeep

@BoltClock：任何引用？ – fabrik 2011-03-16 09:30:13

@BoltClock：請給我鏈接規範 – sandeep 2011-03-16 10:05:31

這裏是一個很好的參考資料來解釋職位類型的差異：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they -differ/ – Dan 2011-03-16 10:10:36

設置position:absolute去除文檔結構的正常流動有問題的元件。所以除非你明確設定寬度，否則不知道寬度有多大。如果這是您所追求的效果，您可以明確設置width:100%。
總體上與position:relative相似的元素的行爲方式與正常的position:static元素相同。因此，除非父元素具有定義的高度，否則設置height:100%將不起作用。相比之下，絕對定位元素從文檔流中移除，因此可以自由調整其包含的元素當前擁有的任何高度。
這可能與您HTML中的父元素有關，但除非您提供完整的HTML和CSS頁面，否則我無法進一步提供幫助。
top和left屬性的默認值是auto。這意味着瀏覽器會爲您計算這些設置，並將它們設置爲元素在沒有position:absolute時將呈現的位置。

來源

2011-03-16 11:33:17 warmanp

感謝您的答案。我喜歡第1和第4點，它非常有用，但對於第3點請實現上述代碼中的值以便更好地理解 – sandeep 2011-03-16 11:49:11

@sandeep，上面的代碼不包含任何有關這兩個div的父元素。我需要知道父母是如何爲了完全回答你的問題而設計的。 – warmanp 2011-03-17 11:14:17

但是，是不是'位置：絕對'仍然相對於它的父元素？ [w3schools.com]（http://www.w3schools.com/cssref/pr_class_position.asp）說：「該元素相對於其第一個定位的（非靜態的）祖先元素進行定位」。這實際上意味着什麼？什麼是祖先元素，它必須被絕對定位？你如何找到元素祖先元素？ – 2015-07-02 05:34:04

絕對vs相對位置寬度和高度

回答

相關問題