无法使z-index处理定位元素

Question

我正在尝试将ul中的图像放在ul的边框上。 ul位于相对位置，图像位于绝对位置。我不能为我的生活弄清楚为什么z-index不起作用。

这是我的HTML：

<nav id="mainNav">
 <ul>
  <li>
   <a href="about.php">About Us</a>
   <img src="http://bluesquarestudio.ca/images/arrow.png">
  </li>
 </ul>
</nav>

这是我的css：

#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;
}

这就是我想要的样子：

它的外观如下： JS小提琴：http://jsfiddle.net/eempey/vv19kopq/

Answer 1

这不起作用的原因是overflow:hidden上有ul，所以超出其 padding 区域的所有内容都会被切断 - 包括图像中位于ul的 border 区域的部分。

所以这根本不是z-index问题。 （请看我的小提琴，没​​有z-index设置任何地方。）

一旦删除overflow:hidden，它就会按预期工作。 （当然只有在应用了另一种方法使ul包含浮动的li后，才能浮动ul或应用:after clearfix。）

http://jsfiddle.net/vv19kopq/6/

Answer 2

我想我不能将子元素放在父元素的顶部？

我的问题的解决方案是创建另一个元素，而不是使用父级的边框。请参阅上面的haxxxton的jsfiddle。