Как заставить мой заголовок быть сверху?

Question

Как заставить мой заголовок быть сверху?

0

поэтому у меня есть это небольшое начало сайта, и я хочу, чтобы верхнее меню оставалось на вершине чего-либо еще. Я использовал позицию: исправлено, и теперь она остается на вершине всего, кроме одного 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;
}

user2904983 22 окт. 2013, в 01:12

Источник

0

Учитывая вашу текущую кодировку - jsfiddle.net/gGMzD - выглядит хорошо для меня ..
Josh Crozier 21 окт. 2013, в 22:55

Теги:

html

css

html5

header

z-index

2 ответа

Ещё вопросы

Учитывая вашу текущую кодировку - jsfiddle.net/gGMzD - выглядит хорошо для меня ..

davidpauljunior · Answer 1 · 2013-10-21T21-27-00.000Z

Добавить position: relative; z-index: -1; position: relative; z-index: -1; на #logo.

Затем убедитесь, что вы добавили z-index: -2 в #blackbar.

См. Здесь: http://jsfiddle.net/davidpauljunior/gGMzD/1/

dhan · Answer 2 · 2013-10-21T21-22-00.000Z

Вместо фиксированной позиции вы можете попробовать

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

но если вы должны использовать фиксированную позицию, вы можете проигнорировать это и увидеть ответ выше.