Question

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 1

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.

Aligning pop-over with button

1 个答案: