html - 絶対配置の使用

Question

絶対配置を使用して、青い正方形を含む div を配置しようとしています。どういうわけか、私はそれを行きたいところに持っていくことができません。

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

私のコード:

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

どのように見えるか:

私は何が間違っているのでしょうか？

Answer 1

これにより、期待される結果が作成されます。

ここでjsFiddle

更新された 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 内のスペースを維持したいが、別の場所に表示する場合は、相対位置を使用します。要素を完全に移動したい場合は、position absolute を使用します。