Question

I'm trying to make some header in my web page but I have a problem. I've created some top menu with fixed position, where are placed links to social media and login link. But this login link is not displayed in my top menu.

HTML code:

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

And this is my CSS file:

#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

此解决方案正在运行。

我将CSS属性提供给登录的父div。
向父母添加绝对位置并给出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>

Answer 2

问题是社交div的宽度是100％，它出现在登录中。你可以这样做：

#header .inner #social{
    width: 70%;
}

https://jsfiddle.net/eoadud8r/9/

Answer 3

topmenu和login元素相互重叠。如果将背景更改为“none”并将z-index更改为大于1的值，则会在菜单上看到登录。我不知道你的意图是不是。

Answer 4

以下是为了获得或多或少的改变而做出的改变。

首先我添加了以下规则：

.inner {
  background: white;
}

#menubar {
  background: white;
}

然后我将背景从#header .inner div移到#header。然后我将top中的#header .inner div更新为10px。

<a href=""> tag for login somehow disappears

4 个答案: