为什么我的文字没有漂浮在我的图像之上？

Question

我正在制作一个主页，当我添加一张图片时，我的导航就在其中，我想知道它为什么不能保持最佳状态。

这是html代码。

<img id="img" src="Img/navigation.png">
        <nav>
            <ul>
                <a href="index.html"><li>Homepage</li></a>
                <li>Forum</li>
                <li>Donate</li>
                <li>Vote</li>
            </ul>
        </nav>

这是CSS

nav {
    width: auto;
    float:right;
    padding: 5px 5px 5px 5px;
    display:inline-block;
}

nav ul{
    list-style:none;
    padding:10px 8px;
}

nav li{
    list-style:none;
    padding:15px 0;
    display: inline-block;
    font-size: 15px;
    color: green;
}

nav a,nav a:visited{
    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
}

为什么文本没有浮在最上面？

Answer 1

您可以这样做：

HTML

        <nav>
            <ul>
                <a href="index.html"><li>Homepage</li></a>
                <li>Forum</li>
                <li>Donate</li>
                <li>Vote</li>
            </ul>
        </nav>
<img id="img" src="Img/navigation.png">

CSS：

nav {
    width: auto;
    float:right;
    padding: 5px 5px 5px 5px;
    display:inline-block;
    position: absolute;
    z-index: 100;
    top:0;
}

img {

position: absolute;
top:0;
z-index: 1;

}

或者只是将图像作为背景。但既然你在这里问，我猜你想要更具体的东西。

Answer 2

您可能希望将图片用作背景：http://jsfiddle.net/nH6GK/

nav {
    width: auto;
    float:right;
    padding: 5px 5px 5px 5px;
    display:inline-block;

    background: url('http://placehold.it/500x150') no-repeat center;
}