title: Why does the negative z-index removes the hovering capabilities of non-statically positioned element?
body: <p>I just noticed that setting  <code>z-index:-1</code> to non-statically positioned elements removes their hovering capabilities. Surprisingly the hovering capabilities of absolutely and fixed positioned elements varie  with conditions,</p>
  
  <blockquote>
    <ul>
    <li><p>Absolutely/Fixed positioned elements loose the hovering capability partially only if there is some text written after them. Hovering over near the top border doesn't work. If there is nothing after them then hovering works properly.</p></li>
    <li><p>Relatively positioned elements loose the hovering capability completely even if there is no text after them.</p></li>
    </ul>
  </blockquote>
  
  <p><strong>Relatively positioned:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  .tooltip {
      position: relative;
      display: block; 
      border: 5px solid black;
      padding: 5px;
      z-index: -1;
  }
  
  .tooltip:hover {
      color:red; background-color: yellow;
  }
  &lt;/style&gt;
  &lt;body style="text-align:center;"&gt;
  
  &lt;p&gt;Move the mouse over the text below:&lt;/p&gt;
  
  &lt;div class="tooltip"&gt;
  Hover over me
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Absolutely positioned with text after it:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  .tooltip {
      position: absolute;
      display: block; 
      border: 5px solid black;
      padding: 5px;
      z-index: -1;
  }
  
  .tooltip:hover {
      color:red; background-color: yellow;
  }
  &lt;/style&gt;
  &lt;body style="text-align:center;"&gt;
  
  &lt;p&gt;Move the mouse over the text below:&lt;/p&gt;
  
  &lt;div class="tooltip"&gt;
  Hover over me
  &lt;/div&gt;
  
  RAndom text
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Fixed positioned with text after it:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  .tooltip {
      position: fixed;
      display: block; 
      border: 5px solid black;
      padding: 5px;
      z-index: -1;
  }
  
  .tooltip:hover {
      color:red; background-color: yellow;
  }
  &lt;/style&gt;
  &lt;body style="text-align:center;"&gt;
  
  &lt;p&gt;Move the mouse over the text below:&lt;/p&gt;
  
  &lt;div class="tooltip"&gt;
  Hover over me
  &lt;/div&gt;
  
  RAndom text
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Question:</strong> Why does setting z-index:-1 remove the hovering capabilities of absolutely/fixed positioned elements, partially if there is text after them, and relative positioned elements completely? </p>
  
  <hr>
  
  <p><strong>Addendum:</strong> From the help of other users I've understood the concept. But there all still some doubts left:</p>
  
  <blockquote>
    <ul>
    <li><p>Why does the whole viewport get the color of the body? The border shows that body is not all over the view port but if we give the body some color then the whole view port gets that color. </p></li>
    <li><p>If we hover over the inner child box, having <code>z-index:-1</code>, then the parent container(i.e. body) is automatically hovered. Why?</p></li>
    </ul>
  </blockquote>