title: Z-index not working as expected
body: <p>I am developing a webpage and I am having problems with z-index not working as expected. My structure looks like this:</p>
  
  <pre><code>&lt;div class="mainWrapper"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="content1"&gt;
              content goes here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In overlay, I have a picture that should be above the main-class, but under the content-class. I've tried simply adding different z-indexes, but it does not seems to work. How can I solve this problem? Does this happen because the overlay-div is outside the other divs?</p>