使用绝对定位

Question

我正在尝试使用绝对定位来定位包含蓝色正方形的div。由于某些原因，我无法让它到达我想要的地方。

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

我的代码：

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

它应该是什么样子：

​

我能做错什么呢？

Answer 1

这会产生预期的结果：

更新的CSS -i改为使用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;
}

-当前上下文中的相同结果

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中的空间，但出现在另一个位置时，使用位置相对。如果您想要完全移动元素，请使用位置绝对。