按鈕對齊彈出式按鈕

點擊按鈕後，我們會顯示一個彈出式按鈕。彈出窗口必須從按鈕所在的位置開始。即彈出窗口必須從按鈕下方開始。按鈕對齊彈出式按鈕

我試圖做到這一點，但我認爲解決的辦法是不優雅：

<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：

.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; 
}

但是如果我的按鈕移動到左側時，彈出窗口不再出現在按鈕下方。

我能做些什麼來自動對齊酥料餅來等。無論按鈕是：

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

來源

2016-08-31 runtimeZero

position設置.popup鍵式容器relative。（您不需要設置top或left或任何其他定位屬性。）這將爲其子項創建新的定位上下文。之後，您可以將您的.popover的position設置爲absolute，並且它將絕對定位在內的相對定位的容器的之內。

例如，.popover{ top: 0; left: 0; }將在.popup-button-container的左上角定位.popover。

這將保持相應的內容定位，無論在容器的頁面上。

來源

2016-08-31 18:00:49 Ragdoll

按鈕對齊彈出式按鈕

回答

相關問題