ポップアップをボタンに合わせる

Question

ボタンをクリックすると、ポップオーバーが表示されます。ポップオーバーは、ボタンがどこにあるかを開始する必要があります。つまり、ポップオーバーはボタンのすぐ下から開始する必要があります。 、私は左のボタンをシフトする場合は

.popup-button-container { 
    text-align: center; 
} 

.popover { 
    position: relative; 
    width: 200px; 
    height: 100px; 
    background-color: rgb(233, 212, 222); 
    border-radius: 4px; 
    top: 18px; 
    left: 190px; 
    box-shadow: 3px -2px 4px #AAA; 
    transition: all linear 0.5s; 
} 

：ここ

<div class="popup-button-container"> 
    <button ng-click="displayPopover=!displayPopover" class="popover-button">Click me!</button> 
    </div> 

    <div class="popover"> 
    <div class="popover-arrow"></div> 
    </div> 

対応するCSSです：

私はこれを行うことを試みてきたが、私は解決策を信じてはエレガントではありませんpopoverはもはやボタンの下に表示されません。

私は自動的にボタンをwhereeverするポップオーバーを揃えるために何ができるのは、次のとおりです。

Plnkr： http://plnkr.co/edit/jOrK5yB1vLajo8qjLvFg?p=preview

Answer 1

はrelativeに.popupボタン-コンテナpositionを設定します。 （topまたはleftまたは他の任意の位置付けプロパティを設定する必要はありません）。これにより、子に新しい位置付けコンテキストが作成されます。その後、.popoverのpositionをabsoluteに設定すると、相対配置されたコンテナである内に絶対的にの位置に配置されます。

たとえば、.popover{ top: 0; left: 0; }は、.popup-button-containerの左上に.popoverを配置します。

これは、ページがどこにあるかにかかわらず、内容を適切に配置します。