Использование абсолютного позиционирования

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, но отображался в другом месте, используйте позицию relative. Если вы хотите полностью перемещать позицию использования элемента в абсолютном выражении.