html - 登录标签不知何故消失了

Question

我想在我的网页中制作一些标题，但我遇到了问题。我创建了一些固定位置的顶部菜单，其中放置了社交媒体链接和登录链接。但是这个登录链接没有显示在我的顶部菜单中。

HTML代码:

<div id="body">
<header id="header">
    <div class="inner">
        <h1><a href="itw1.html"><span>FITLayout</span></a></h1>

        <div id="topmenu">
            <a href="#" class="login">Login</a>
        </div>

        <div id="social" class="icons">
            <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
            <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
            <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
        </div>

        <nav id="menubar">
        <ul id="menu">
            <li class="dropdown"><a href="#">Company</a></li>
            <li class="selected dropdown"><a href="#">Products</a></li>
            <li class="dropdown"><a href="#">News</a></li>
            <li class="dropdown"><a href="#">Downloads</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
    </div>
</header>
</div>

这是我的 CSS 文件:

#body {
    width: 100%;
    height: 900px;
}

#header {
    float: left;
    width: 100%;
}

#header .inner div {
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    color: white;
    background-color: #5f5f5f;
}

#header .inner #topmenu .login {
    text-decoration: none;
    display: inline-block;
    float: right;
    padding-right: 20px;
    padding-top: -10px;
    color: white;
}

#header .inner h1 {
    display: block;
}

HERE是指向 jsfiddle 的链接，向您展示我的问题。
注意:我只能修改CSS代码，不能修改HTML。

请问有什么解决办法吗？

Answer 1

此解决方案有效。

1. 我将 CSS 属性赋予了登录的父 div。

2. 向父级添加绝对位置并提供 z-index。

#body {
    width: 100%;
    height: 900px;
}

#header {
    float: left;
    width: 100%;
}

#header .inner div {
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    color: white;
    background-color: #5f5f5f;
}
#header .inner #topmenu{
  position: absolute;
    right: 0;
    z-index: 1;
    width: auto;
}
#header .inner #topmenu .login {
    color: white;
}
#header .inner h1 {
    display: block;
}

<div id="body">
<header id="header">
    <div class="inner">
        <h1><a href="itw1.html"><span>FITLayout</span></a></h1>

        <div id="topmenu">
            <a href="#" class="login">Login</a>
        </div>

        <div id="social" class="icons">
            <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
            <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
            <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
        </div>

        <nav id="menubar">
        <ul id="menu">
            <li class="dropdown"><a href="#">Company</a></li>
            <li class="selected dropdown"><a href="#">Products</a></li>
            <li class="dropdown"><a href="#">News</a></li>
            <li class="dropdown"><a href="#">Downloads</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
    </div>
</header>
</div>