title: CSS Position In SlideBar
body: <p>I am using Tailwind with reactJS,
  I have 2 different jsx file i.e Navpanel.jsx &amp; Home.jsx</p>
  <p>When I used fixed Position <strong>Home Text</strong> is going in navpanel. I also use block instead of flex but Navpanel then cover entire screen.
  Please give me solution.</p>
  <pre><code>function Navpanel() {
    return (
      &lt;div className=&quot;fixed flex h-full w-1/5 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10&quot;&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  <pre><code>function Home() {
    return (
      &lt;div className='flex relative'&gt;Home&lt;/div&gt;
    )
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HDeGg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HDeGg.png" alt="Screenshot" /></a></p>