上面列出边框的图像..可能很容易

Question

我可能有一天中最简单的问题，但我很难找到解决问题的直接答案（HTML / CSS -n00b）......

我在我的标记中有一个img-tag，下面是一个包含水平列表的div-tag。 在ul-CSS列表中我已经声明了一个顶部和底部边框，img（这是一个带有透明背景的.PNG）显示在ul border-top的前面，这就是我想要的。但是对于li-CSS，我对每个元素都有边框权限来分隔它们，这个边框就在img的前面......

在这里你明白我的意思：

编辑：

#topLeftImage {
    z-index: 999;
    margin-left: 1em;
    margin-top: 3px;

#navigationlist li
{
    z-index: 0;
    display: inline;
    list-style-type: none;
    padding-right: 2px;
    font-size: 75%;
    border-right: 2px solid #C0C0C0;

}

那么如何声明img让它显示在那个边界的前面呢？ 还有一个快速的问题，我可以声明最后一个li元素没有得到右边界，因为它没有右邻居吗？

任何提示都会有所帮助！

-Thanks

Answer 1

您是否使用IE检查您正在进行的这些更改的结果？ IE的z-index方法有点精神。尝试下面的代码，看看是否有帮助。

#topLeftImage {
    z-index: 999;
    margin-left: 1em;
    margin-top: 3px;
    position:relative;
}

#navigationlist li {
    z-index: 0;
    display: inline;
    list-style-type: none;
    padding-right: 2px;
    font-size: 75%;
    border-right: 2px solid #C0C0C0;
    position:relative;
}

并给出这两项的父母：

#parent {
    z-index: 0;
    position:relative;
}

Answer 2

如果你给它一个类和/或为li的类设置z-index:9999;，你可以为img设置z-index:0;。

e.g。

img.className {
   z-index:9999;
}

li.className {
   z-index:0;
}

或者如果您使用ID：

img#idName {
   z-index:9999;
}

li#idName {
   z-index:0;
}

Answer 3

首先，css属性z-index应该有助于解决第一个问题。

img{
   z-index:999;
}

这应该让它出现在一切之上。

（重要......虽然小心这一点......图像的整个区域将显示在导航的顶部，因此无法单击项目一个超链接。）

对于后一个问题，您可以使用last-child伪类将右边框设置为空。例如

#nav li:last-child{
  border-right:none;
}

这是一个CSS3功能......所以IE8及以下版本不会让它工作。也许只是在最后一项中添加一个类将是浏览器最友好的方式！

#nav li.last{
  border-right:none;
}

<li>normal</li><li class="last">furthest right</li>

如果我和其他人建议的z-index导致我概述的问题，请告诉我。会有一些解决方案，但需要一点点努力！

Answer 4

在您的代码中使用z-index并且正确，但您必须记住，z-index仅使用 定位元素。因此，在#navigationlist li和#topLeftImage中添加position:relative;