title: Cannot get z-index to work on positioned elements
body: <p>I am trying to get an image that is in a ul to sit on top of the ul's border. The ul is positioned relative and the image is positioned absolute. I can not for the life of me figure out why the z-index is not working.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;nav id="mainNav"&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;a href="about.php"&gt;About Us&lt;/a&gt;
     &lt;img src="http://bluesquarestudio.ca/images/arrow.png"&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>#mainNav{
      margin-bottom: 30px;
      display: block;
      position: relative;
      overflow: hidden;
  }
  #mainNav ul{
      list-style-type: none;
      padding-left: 0px;
      width: 100%;
      border-bottom: solid #01AEF0 5px;
      overflow: hidden;
      position: relative;
      z-index: 20;
  }
  #mainNav li{
      float: left;
      padding-right: 10px; 
      padding-left: 10px; 
      padding-bottom: 10px; 
      margin-top: 10px;
      text-transform: uppercase; 
      position: relative;
      text-align: center;
      height:25px;
      text-align: center;
  }
  #mainNav a{
      color:#000;
      text-decoration: none;
      display: block;
      width: 117px;
  }
  </code></pre>
  
  <p>This is how I want it to look:
  <img src="https://i.stack.imgur.com/ob4d1.png" alt="This is how I want it to look"></p>
  
  <p>This is how it does look:
  JS fiddle: <a href="http://jsfiddle.net/eempey/vv19kopq/" rel="nofollow noreferrer">http://jsfiddle.net/eempey/vv19kopq/</a></p>