title: Popup doesn't appear when using overflow on parent div
body: <p>On my chat app, I have a contact list, and when you click on a contact, it opens a drop down menu on the left of the contact (something like <a href="http://screencast.com/t/uM643uwd69CB" rel="nofollow">http://screencast.com/t/uM643uwd69CB</a>), but with overflow auto on the contact list, it doesnt appear.</p>
  
  <p>HTML looks like</p>
  
  <pre><code>  &lt;ul id="contact-list"&gt;
      &lt;li ng-repeat="contact in contacts | orderBy: '-isOnline': false" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)"&gt;
        &lt;/div&gt;
        &lt;div class="name"&gt;{{ contact.username }}&lt;/div&gt;
        &lt;ul ng-hide="popoverHide" class="contact-dropdown"&gt;
          &lt;button ng-click="chatWithUser(contact)" ng-disabled="!isChatAvailableForTheContact(contact)"&gt;{{ !contact.isOnline ? 'Leave a' : 'Instant' }} Message&lt;/button&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>CSS looks like</p>
  
  <pre><code>#contact-list {
    width: 100%;
    padding: 0;
    margin: 0;
    /*overflow: auto;*/
  }
  #contact-list li {
    list-style: none;
    position: relative;
  }
  #contact-list li .contact-dropdown {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -150px;
  }
  #contact-list li .contact-dropdown button {
    width: 100%;
    color: #0077CC;
    background: none;
    border: none;
    cursor: pointer;
  }
  #contact-list li .contact-dropdown button:disabled {
    color: gray;
  }
  </code></pre>
  
  <p>When <code>overflow-y: auto;</code> is set in <code>#contacts-list</code>, then the pop-over menu will not pop when clicking on a list item. However when it's not set, the pop over menu pops. Any idea?</p>
  
  <p><a href="http://jsfiddle.net/od4vjhbc/1/" rel="nofollow">http://jsfiddle.net/od4vjhbc/1/</a></p>