使用絕對定位

Question

我想使用絕對定位來定位包含藍色方塊的div。出於某種原因，我無法得到它想要的地方。

的jsfiddle：http://jsfiddle.net/qkF3Z/

我的代碼：

#share-area-arrow { 
position: absolute; 
height: 10px; 
width: 10px; 
background-color: blue; 
} 

應該怎麼看：

什麼可能我是做錯了什麼？

Answer 1

這就造成了預期的結果：

jsFiddle here

更新CSS - 我用relative定位代替。

#share-area-arrow { 
    position: relative; 
    height: 10px; 
    width: 10px; 
    background-color: blue; 
    top: 20px; 
    left: 70px; 
} 

---

或者，如果你覺得你需要absolute定位，用途：

#share-area-arrow { 
    position:absolute; 
    top: 30px; 
    left: 192px; 
} 

jsFiddle here - 同樣的結果在目前情況下

Answer 2

有2件。絕對位置將使用最接近的相對定位的父級的座標系。所以，你需要相對位置添加到父：

#share-something { 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 40px; 
    height: auto; 
    width: 540px; 
    overflow: auto; 
    position:relative; 
} 

，然後箭頭的位置：位置不同類型之間

#share-area-arrow { 
    position: absolute; 
    top:10px; 
    left:70px; 
    height: 10px; 
    width: 10px; 
    background-color: blue; 
} 

http://jsfiddle.net/qkF3Z/6/

一個真正偉大的解釋可以在這裏找到： http://alistapart.com/article/css-positioning-101。要點是當你想要元素在dom中保持它的空間，但出現在另一個位置時，使用相對位置。如果你想完全移動元素使用位置絕對。