title: Z-index does not work between 2 react functional components
body: <p>Here is my example where I need to put the first component in front of the second.
  Currently the second component is in front of the first despite z-index. I tried also to put style on the component tag but it does not work. Where is my mistake ?</p>
  <p>First component:</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  const Container = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  z-index: 100;
  `;
  
  function Aaa() {
  
      return (
          &lt;Container&gt;asd&lt;/Container&gt;
      )
  }
  
  export default Aaa;
  </code></pre>
  <p>Second component</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  const Container = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  margin-top: -200px;
  background: pink;
  z-index: 1;
  `;
  
  function Bbb() {
  
      return (
          &lt;Container&gt;qwe&lt;/Container&gt;
      )
  }
  
  export default Bbb;
  </code></pre>
  <p>App:</p>
  <pre><code>function App() {
    return (
      &lt;&gt;
      &lt;Aaa /&gt;
      &lt;Bbb /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>