0

所以我有一个网站的这个小开始，我希望顶部菜单保持在其他任何内容之上。我使用了 position:fixed ，现在它确实位于所有内容之上，除了一个显示徽标的 div ......我尝试使用 z-index 但这没有帮助。如果可能的话，我如何在不使用 Js 的情况下强制该标题保持在顶部...

“blackBar”在标题顶部传递，但它是唯一这样做的......

<body>
<div id="pageBloc">
    <header>
        <nav>
            <ul>
                    <li><a href="#">Stuff1</a></li>
                    <li><a href="#">Stuff2</a></li>
                    <li><a href="#">Stuff3</a></li>
                    <li><a href="#">Stuff4</a></li>
                    <li><a href="#">Stuff5</a></li>
                </ul>   
            </nav>
        </header>

        <div id="topBloc">

            <div id="blackBar">
                <p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
                <h1 id="titrePrincipal">MyTitle</h1>
                <h2 id="soustitrePrincipal">SubTitle/h2>
            </div>

        </div>

        <section id="temporatySection">

        </section>
    </div>
</body>

这是CSS

body, html
{
    margin: 0px;
    padding: 0px;
    height:100%;
}
#pageBloc
{
    height:100%;
}

/*Header*/

header
{   
    text-align:center;
    background-color: #26292E;
    height: 40px;
    width: 100%;
    position:fixed;

}

nav ul, nav li
{
    margin-top:5px;
    text-transform:uppercase;
    display: inline-block;
    list-style-type:none;
}

#topBloc
{
    background: url('Images/backgroundBloc12.jpg') fixed center;
    background-size:cover;
    width: 100%;
    height: 100%;
}

#blackBar
{
    background: rgba(38,41,46,0.80);
    position:absolute;
    bottom:15%;
    width: 100%;
}

#logo 
{
    padding: 3px;
    text-align: center; 
}

#titrePrincipal
{
    display:none;
    text-align:center;
    color: white;
}

#soustitrePrincipal
{
    text-align: center;
    color:black;
}

#temporarySection
{
    height: 1000px;
}
4

2 回答 2

0

添加position: relative; z-index: -1;到#logo.

然后，确保添加z-index: -2到#blackbar.

见这里：http: //jsfiddle.net/davidpauljunior/gGMzD/1/

于 2013-10-21T23:05:17.013 回答
0

而不是固定位置，您可以尝试

position: absolute
top: 0
left: 0
right: 0
z-index: 100

但是如果您必须使用固定位置，您可以忽略这一点并查看上面的答案。

于 2013-10-21T23:56:04.953 回答