Question

所以我有一个网站的这个小小的开头，我希望顶级菜单保持在其他任何东西之上。我使用的位置：固定，现在它确实保持在除了一个显示徽标的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;
}

Answer 1

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

然后，请确保将z-index: -2添加到#blackbar。

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

Answer 2

您可以尝试

而不是固定位置

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

但是如果你必须使用固定位置，你可以忽略它并看到上面的答案。

如何强制我的标题在顶部？

2 个答案: