title: how to use z-index with relative positioning?
body: <p>I have a problem with <code>z-index</code> and my code. I want to have a popup on every row, positioned relative to that row. So I created this code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   .level1
      {
          position:relative;
          z-index:2;
      }
      .level2
      {
          position:relative;   
          z-index:3;
      }
      .popup
      {
          position:absolute;
          left:0px;
          top:10px;
          width:100px;
          height:100px;
          background:yellow;
          z-index:4;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="level1"&gt;
          &lt;div class="level2"&gt;
              &lt;input type="text" value="test1" /&gt;
              &lt;div class="popup"&gt;test1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
              &lt;input type="text" value="test2" /&gt;
              &lt;div class="popup"&gt;test2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>