Css arrow с капюшоном

Question

Обратите внимание на следующую скрипку. Я пытаюсь создать стрелку в нижней части выноски, которая имеет тень. Это работает:

http://jsfiddle.net/tmcconechy/vT4rj/

Однако, если я хочу, чтобы переместить диалог вокруг с помощью установки суперпользователя левый/верх/ширина.

left: 9px; 
position: absolute; 
top: 36px; 

Тогда: после стрелки вне позиции. Способ, которым я могу справиться с этим, - установить следующий элемент: position: relative;top: 100%. Однако, как только я это сделаю, стрелка формы нарушена?

В любом случае я могу справиться с этим, чтобы позиция стрелки была относительно размера и положения коробки?

Answer 1

Пробег: this.

Все, что я сделал, было размещено относительно позиционированным div вокруг того, что вы хотите, и это div, в котором вы перемещаетесь. В соответствии с MDN, если есть предки div, которые расположены, ваше абсолютное позиционирование работает с позиции предка.

Html:

<div class="positioner" style="position: relative; top: 200px;"> 
    <div class="inline-popup"></div> 
</div> 

Answer 2

Вы должны держать эту стрелку в абсолютном положении, так что вы можете установить его легко в любом месте вы хотите.

Для того, чтобы перевести его снизу вверх, Gange верхнее положение и обратная коробка-тень, например:
http://jsfiddle.net/vT4rj/1/
, а затем изменить границы:
http://jsfiddle.net/vT4rj/3/

.inline-popup:after { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-top: 1px solid #CCCCCC; 
    border-right: 1px solid #CCCCCC; 
    box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.30); 
    content: ""; 
    height: 18px; 
    left: 176px; 
    position: absolute; 
    top: -9px; 
    transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    width: 18px; 
} 

Answer 3

Я достиг этого путем изменения левого положение на стрелке до 50% вместо фиксированных пикселей.

left: 50%; 

ч/т http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/