runtimeZero runtimeZero - 3 months ago 21
CSS Question

Aligning pop-over with button

Upon click of button, we display a pop-over. The popover must start where the button is. i.e the popover must begin right below the button.

I have attempted to do this, but I believe the solution is not elegant:

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


Here's the corresponding 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;
}


However if I shift the button to the left, the popover no longer appears below the button.

What can i do to automatically align the popover to whereever the button is:

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

Answer

Set the .popup-button-container position to relative. (You don’t need to set top or left or any other positioning properties.) This will create a new positioning context for its children. After that, you can set your .popover’s position to absolute and it will be positioned absolutely within the relatively positioned container.

For example, .popover{ top: 0; left: 0; } will position .popover at the top left of .popup-button-container.

This will keep the contents positioned accordingly, no matter where on the page the container is.

Comments