Question

当我向下滚动页面时，导航栏已修复，但ID标注未修复。我想要将callout div id保留在导航栏的顶部，它应该保持固定。在导航栏下面，我有图像滑块。我想我并没有将callout id div保持在正确的位置。请帮帮我。

    HTML
<header>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="" class="current">Home</a></li>
                <li><a href="">Certifications</a></li>
                <li><a href="">Courses</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">Login</a></li>
            </ul>
        </nav>
    </header>
    <div id="callout">
        <p>Call us at <strong>021-222-2222</strong</p>
    </div>

CSS
a{

    text-decoration: none;
    font-weight: bold;
}
a:hover{
    color: #FFF;
    text-decoration:underline;
}
header{
    background: #405580;
    width:100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity:0.90;
}
#callout{
    width:100%;
    background: #405580;
    overflow:hidden;
    opacity:0.90;
}
#callout p{
    text-align:right;
    font-size: 13px;

    color: white;
}
a img{
    margin:20px;
    float: left;
    width: 50px;
    height:50px;
}
nav{
    float:right;
    padding: 35px 20px 20px 0;
}
#menu-icon{
    display:hidden;
    width: 40px;
    height: 40px;
    background: url('menu.png') center no-repeat;
}
a:hover#menu-icon{
    border-radius: 4px 4px 0 0;

}
ul{
    list-style:none;
}
nav ul li{
    display: inline-block;
    float:left;
    padding: 10px;
}
.current{
    color: #FFF;
    text-decoration:underline;
}

Answer 1

请试试这个。希望这能解决你的问题。在CSS文件中添加此代码而不是您正在使用的代码。

#callout{

    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;

}

Answer 2

请检查我是否正确。

header{
background: #405580;
width:100%;
height: 86px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity:0.90;}

#callout{
    width:100%;
    background: #405580;
    overflow:hidden;
    position: relative;
    opacity:1;
}

#callout p{
        text-align:right;
        font-size: 13px;
        color: white;
    }

Div部分正在与Navbar合并

2 个答案: