沒有為 position: absolute 元素賦予 left、top 等值，與賦予 left:0; top:0; 的效果為何不一樣？

01-14

簡單來說，因為 left 和 top 的 initial value 非 "0"，而是 "auto"。

複雜來說，要知道 "auto" 的具體效果，請看：

10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

10.3.8 Absolutely positioned, replaced elements

http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width

10.6.4 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

10.6.5 Absolutely positioned, replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-heigh

計算過程很複雜，想全整明白的話，就抽空看看好了。

感謝邀請。

如果一個元素的 "position" 特性值不是 "static"（默認元素不申明position即為static），該元素被稱為定位元素。定位的元素生成定位框，其定位基於四個特性(置入值)："top"，"right"，"bottom"，"left"。

如果元素是絕對定位（Absolute positioning），並且申明了置入值（left
ight opottom），那麼其定位的參照物即為其包含塊，可能是父元素，也可能不是父元素。

關於包含塊（Containing block ）更詳細的介紹：http://www.w3.org/TR/CSS21/visudet.html#containing-block-details參見其中的第4條：

If the element has "position: absolute", the containing block is established by the nearest ancestor with a "position" of "absolute", "relative" or "fixed"

即如果絕對定位元素申明了置入值，那麼其置入值的參照物即為最近的申明了"position"為"absolute
elativefixed的祖先元素。注意這裡是置入值的參照物。

如果絕對定位元素沒有申明置入值，只申明了position:absolute，那麼其自身定位以及margin的參照物即為其最近的塊級、單元格（table cell）或者行內塊（inline-block）祖先元素的內容框。

如果同時申明了置入值和margin值呢？看如下代碼：

&&&&

你會發現元素本身距其包含塊（這裡是body，跟LZ DEMO一個性質）的距離是margin-left+left=300px 。
動手試試吧！

同時必須指出「如果不給它設置left和top等值的話，它就相當於沒有寬頻的浮動元素。」這句話是錯誤的，浮動元素和絕對定位元素是2種不同的文檔流，浮動元素會對其他元素造成影響，但絕對定位元素完全脫離文檔流，不對其他元素造成影響。

更詳細的閱讀《定位體系概述》：http://w3help.org/zh-cn/kb/009/

是不是別的地方寫過這些元素了，比如div｛left： 100px;｝這樣的話類選擇器沒寫就會使用div的，如果寫了就會覆蓋掉，結果自然不一樣

---------------------------------------------------------

明白你的意思了，這個區別是父元素margin造成的，不寫left這些元素的時候位置是在margin內的左上角，而left：0和top：0是在包括margin的部分的左上角

因為position中的 left，right的默認值並不是0！！！所以當然不一樣了。

那麼默認值是多少呢？

可以這麼來理解：

在absolute未起作用前，元素有一個位置（姑且稱之為「原來的位置」吧）；absolute起作用後（沒有設置left、top的值）元素是要保持其「原來的位置」不變的，這樣就有left和top的默認值了（是多少不用管，反正默認值就是要讓該元素的位置和原來的位置一樣）。

記住兩點就好了：

1、position：absolute中的 left，top的默認值並不是0；

2、沒有設置left、top時，left和top的默認值將使元素的位置和「原來的位置」一樣。

今天剛好碰到這個問題，發現樓上的許多答案都頗有益處，我自己再總結一個：

假設父元素position: relative; 有padding的狀態下：

如果有top/left:0 ：子元素緊貼父元素padding的邊界（因為父元素包含塊的邊界就是padding邊界）

如果沒有設置值：子元素緊貼父元素content的邊界（其實此時值為auto）

代碼如下：

這個div嵌套在body裡面，如果不給img設置left和top等值的話，它就相當於沒有寬度的浮動元素。如果設置了top和left等值的話，那麼它就會去找position為非static得元素做為containing box.這裡是body。求問有沒有更加官方的解釋？

在國外網站看見的答案：So if all four sides of an AP element are auto, then this AP element is pasted onto the spot where it would go had it been non-AP, while remaining on its own layer.

http://www.vision.to/articles/auto-positioning-for-absolute-elements.php 求鑒定......

那要看它的父元素的定位情況。最好有代碼貼上來啊！！

1.如果position: absolute 元素未賦予 left、top實際值，那麼其值為auto

2.「auto」與「0」在父級元素沒有padding值的情況下，表現一樣，如果有padding值，瀏覽器表現不同。有空會將測試demo發上來

absolute是生成覺對定位的元素，脫離了文本流（即在文檔中已經不佔據位置），參照瀏覽器的左上角通過top,right,bottom,left 定位。

可以選取具有定位的父級對象或者body坐標原點進行定位，也可以通過z-index進行層次分級。

absolute在沒有設定top,right,bottom,left值時是根據父級對象的坐標作為始點的，當設定top,right,bottom,left值後則根據瀏覽器的左上角作為原始點。

而且不論元素是行內元素還是塊級元素，都會生成一個塊級框，也就是例如行內元素span設置了absolute後就可以設置height和width屬性了。

看看如下案例：

CSS代碼部分：

HTML代碼部分：

最終效果圖（這是設定top,right,bottom,left值，以瀏覽器左上角為原點之後的效果）：

如果沒有設置top,right,bottom,left值，是以父級對象的坐標為原點，如下圖：

具體可以看看這篇文章：css position屬性圖文案例詳解，包教不包會

如果未定義left 和right，則默認值為auto。如果left或right的值為auto，則元素的頂端或者左邊（從左往右讀）要相對於其未定位前本來的頂端或左邊對齊。

由於父級元素確定...