html - 使用绝对定位

Question

我正在尝试使用绝对定位来定位包含蓝色方 block 的 div。由于某种原因，我无法将其到达我想要的位置。

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

我的代码:

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

它应该是什么样子:

我可能做错了什么？

Answer 1

有 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 内保持其空间，但出现在另一个位置时，请使用相对位置。如果你想完全移动元素，请使用绝对位置。