title: Jquery open dropdown near clicked element
body: <p>I'm trying to open a absolute positioned dropdown near the clicked element that opens the dropdown. Normally you use <code>position:relative</code> and <code>position:absolute</code> but my question is a bit different.</p>
  
  <p>My dropdown menu is not placed near the clicked element but instead is placed outside that div just after the <code>body</code> tag. 
  So normally you would do something like this:</p>
  
  <pre><code> &lt;li class="cart dropdown-opener"&gt;
     &lt;div class="dropdown"&gt;...html for cart..&lt;/div&gt;
   &lt;/li&gt;
  
  $('.dropdown-opener').on('click', function(e){
      $(this).find('.dropdown').addClass('open');
  });
  </code></pre>
  
  <p>In my case it's something along these lines:</p>
  
  <pre><code> &lt;div data-open="cart"&gt;
     &lt;div class="dropdown"&gt;...html for cart..&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;li class="cart dropdown-opener"&gt;&lt;/li&gt;
  
    $('.dropdown-opener').on('click', function(e){
      var open_this = $(this).data('dropdown');
      $(document).find("[data-open='" + open_this + "']").find('.dropdown').addClass('open'); 
    });
  </code></pre>
  
  <p>To be complete:</p>
  
  <pre><code>.dropdown {
      background: #fff none repeat scroll 0 0;
      box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0);
      max-height: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 50px;
      transform: translateZ(0px);
      transition-delay: 0.1s, 0.1s, 0.5s;
      transition-duration: 0.3s, 0.3s, 0.7s;
      transition-property: max-height, width, box-shadow;
      transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
      width: 0;
      z-index: 9998;
      cursor: auto;
  }
  .dropdown.open {
      box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.5);
      max-height: 500px;
      width: 650px;
  }
  </code></pre>
  
  <p>What I try to do is to open that dropdown near the clicked element <code>cart dropdown-opener</code>. So that it works like when using <code>position:relative</code> and <code>position:absolute</code>.</p>
  
  <p>But I have no clue where to start. Any help greatly appreciated. </p>