按钮对齐弹出式按钮

点击按钮后，我们会显示一个弹出式按钮。弹出窗口必须从按钮所在的位置开始。即弹出窗口必须从按钮下方开始。按钮对齐弹出式按钮

我试图做到这一点，但我认为解决的办法是不优雅：

<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

按钮对齐弹出式按钮

回答

相关问题