html - 列表边框上方的图像..可能很容易

Question

我可能遇到了今天最简单的问题之一，但我很难找到如何解决它的直接答案 (HTML/CSS -n00b)...

我在我的标记中有一个 img-tag，在它下面有一个包含水平列表的 div-tag。 在列表 ul-CSS 中，我声明了顶部和底部边框，img(这是一个具有透明背景的 .PNG)显示在 ul border-top 前面，这正是我想要的。但是对于 li-CSS 我有每个元素的 border-right 来分隔它们，这个边框在 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-border 的前面？ 另一个快速的问题是，我可以声明最后一个 li 元素没有右边界吗，因为它没有右邻居？

任何提示都会有所帮助!

-谢谢

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