title: open a dialogue box just like model but attached to the element
body: <p>I am new to React Js, I want to open a drop down box which may contain buttons, input fields, e.t.c but the issue is that I have tried model dropdown and many solutions but that does not attach exactly to the bottom of the element opening the dropdown when it is clicked. Another problem is that the component it is contained is just max 50px height so the model should be floating over that component.</p>
  <p><a href="https://i.stack.imgur.com/srKpC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/srKpC.jpg" alt="this is the Design view" /></a></p>
  <p>In the Image attached the box is opening when open is clicked and the upper blue strip component contain the code but its is displaying on both</p>
  <p>just want the box that can contain elements and position exactly under the element it is opened by</p>
  <pre><code>import React from &quot;react&quot;
  import UserTopBar from &quot;./UserTopTab&quot;
  import BelowSection from &quot;./BelowSection&quot;
  
  const Parent =()=&gt;{
    &lt;UserTopBar /&gt;
    &lt;BelowSection /&gt;
   }
   export default Parent
  </code></pre>
  <p>//Top Bar</p>
  <pre><code>import React from 'react';
  import Notification from '../Notification'
  import { NavLink } from 'react-router-dom'
  import { QuestionCircleFilled, CloseOutlined } from '@ant-design/icons';
  
  class UserTopTab extends React.Component {
      
      render() {
          return (
              &lt;&gt;
                  &lt;div className=&quot;d-inline-flex&quot; style={{ background: &quot;#242F84&quot;, width: &quot;100%&quot;, zIndex: &quot;990&quot; }}&gt;
                      &lt;NavLink to=&quot;/&quot; className=&quot;Cambium &quot;&gt;
                          &lt;p className=&quot;mb-0 px-2 White&quot; &gt;Title&lt;/p&gt;
                      &lt;/NavLink&gt;
                      &lt;NavLink to=&quot;/AllSearches&quot; className='tab my-auto TabStyle'&gt;
                          &lt;p className=&quot;mb-0 FS_20 px-2 White&quot; &gt;All Searches&lt;/p&gt;
                      &lt;/NavLink&gt;
                      &lt;NavLink to=&quot;/AllSearches&quot; className='tab my-auto TabStyle'&gt;
                          &lt;p className=&quot;mb-0 FS_20 px-2 White&quot; &gt;Untitled 1&lt;/p&gt;
                      &lt;/NavLink&gt;
                       {this is toogle button when clicked it will open a dialogue box attached to its bottom}
                       &lt;button type=&quot;button&quot; className=&quot;mb-0 FS_20 px-2 White&quot; &gt;Open +&lt;/button&gt;
  {*innerpart of the box*}
                      &lt;Notification /&gt;
                      &lt;p className=&quot;mb-0 Help&quot;&gt;&lt;QuestionCircleFilled /&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          );
  
      }
  }
  
  export default UserTopTab;
  </code></pre>
  <p>//Second Section</p>
  <pre><code>import React from 'react';
  const BelowSection =()=&gt;{
   &lt;div&gt;
       &lt;h1&gt;bellow Section is displayed here &lt;/h1&gt;
   &lt;/div&gt; 
  }
   export default BelowSection
  </code></pre>