title: Absolute positioning of children with respect to parent and viewport
body: <pre><code>    &lt;div class="parent"&gt;
      &lt;strong&gt;I function as a hover trigger&lt;/strong&gt;
      &lt;div class="child"&gt;I am a child&lt;/div&gt;
      &lt;/div&gt;
  
      ... // More number of &lt;div&gt; Skipping for reducing the number of lines
  
      &lt;div class="parent"&gt;
      &lt;strong&gt;I function as a hover trigger&lt;/strong&gt;
      &lt;div class="child"&gt;I am a child&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>.parent{
      display:block;
      width:150px;
      position:relative;
  }
  .child{
      position: absolute;
      display: none;
      top:0;
      right:148px;
  }
  </code></pre>
  
  <p>The Script</p>
  
  <pre><code>$('.parent').mouseenter(function(e) {
      $(this).find('.child').css({"display": "block"});
  });
  $('.parent').mouseleave(function(e) {
      $(this).find('.child').css({"display": "none"});
  });
  </code></pre>
  
  <p>The child <code>&lt;div&gt;</code> will appear if the parent <code>&lt;div&gt;</code> is hovered. And the position of child is with respect to the parent. But how can the position is adjusted such that if the child overflows the viewport it needs to be pushed up. Usually the child corresponding to the top parent <code>&lt;div&gt;</code> does not overflow from the viewport whereas the children of the bottom parent <code>&lt;div&gt;</code> get overflow.</p>
  
  <p><img src="https://i.stack.imgur.com/EGCVC.jpg" alt="enter image description here"></p>