title: z-index is not working responsive and position fixed sidebar
body: <p>i got stuck in css, 
  I am implementing sidebar(toggle)  and modal,
  But its not working.</p>
  
  <pre><code>.show-modal{
    z-index: 2147483647;
    background:rgba(1,1,1,0.5);
  }
  </code></pre>
  
  <p>This is the css i gave to modal</p>
  
  <pre><code>.left-menu{
      width: 240px;
      height: calc(100% - 55px);
      //background: @gray-3;
      flex: 1 0 auto;
      border-radius: 0 5px 5px 0;
      overflow-x: hidden;
      position: fixed;
      top: 60px;
      z-index: 1;
  }
  </code></pre>
  
  <p>This is css i gave to the sidebar.</p>
  
  <p>what i am getting is </p>
  
  <p><a href="https://i.stack.imgur.com/hhewK.png" rel="nofollow noreferrer">Here is my image</a></p>
  
  <p>Please help me,
  Thanks in advance</p>