title: Drop shadow on hover Div over others Divs
body: <p>I have few divs like that:</p>
  
  <pre><code>&lt;div class="tab"&gt;
     &lt;h2&gt;Text&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="tab"&gt;
     &lt;h2&gt;Text&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="tab"&gt;
     &lt;h2&gt;Text&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.tab {
      background: #ffffff;
      width: 100%;
      height: 50px;
      border-color: #B6B6B6;
      border-top: solid 1px #B6B6B6;
      transition: 0.3s;
      line-height: 12px;
  }
  .tab:hover {
      background: #EEEEEE;
      transition: 0.3;
      cursor: pointer;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
      z-index:1000
  }
  </code></pre>
  
  <p>as you can see I want to make div drop shadow when hover over it. But everytime when I hover over div, dropshadow is under another div. Can you help me fix it?</p>
  
  <p><img src="https://i.stack.imgur.com/0F8bh.png" alt=""></p>
  
  <p>This is how it's look like when over over last div:</p>
  
  <p><img src="https://i.stack.imgur.com/PeGZm.png" alt=""></p>