title: Z-index not working on img and div with p
body: <p>I'm having a problem with with positioning elements on top of each other.
  Here is my markup:</p>
  
  <pre><code>&lt;div id="glownySlajder"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd"&gt;
                          &lt;div class="fr"&gt;
                              &lt;a href="#" class="przyciskPoprzednia fl" title="Poprzednia"&gt;&lt;img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo"&gt;&lt;/a&gt;
                              &lt;p class="fl"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales &lt;/p&gt;
                              &lt;a href="#" class="przyciskNastepna fr" title="Następna"&gt;&lt;img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo"&gt;&lt;/a&gt;
                          &lt;/div&gt;
  
                      &lt;/li&gt;
                   &lt;/ul&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>#glownySlajder {
      margin-bottom: -2px;
  }
  
  #glownySlajder a {
      margin: 7px;
  }
  
  #glownySlajder ul li img {
  
      z-index: 9998;
  }
  
  #glownySlajder div {        
      z-index: 9999;
      color: black;
      background-color: #e7e7e7;
      height: 85px;
      width: 500px;
      padding: 0px 5px;
  
  }
  
  #glownySlajder div p {
  
      font-size: 11px;
      line-height: 14px;
      margin-top: 20px;
      width: 390px;
  }
  
  .fr {
      float: right;
  }
  
  .fl {
      float: left;
  }
  </code></pre>
  
  <p>This is what I get: </p>
  
  <p><img src="https://i.stack.imgur.com/QYgjQ.jpg" alt="First image"></p>
  
  <p>This is want I want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/JsYhr.jpg" alt="Second Image"></p>
  
  <p>The problem is that z-index doesn't seem to be working. When I try to do negative margin on a <code>div</code> with <code>p</code>, it just disappears under the image, not what I want exactly.</p>
  
  <p>I am unable to work this out on my own, any tips please?</p>