web-dev-qa-db-fra.com

Image d'arrière-plan Div Problème de Z-Index

J'essaie de faire apparaître l'image d'arrière-plan de mon contenu derrière l'en-tête et le pied de page. Actuellement, le haut de l'arrière-plan du contenu dépasse de l'en-tête et vous pouvez voir que le bas a légèrement recouvert le pied de page (remarquez le léger changement de la couleur de la bordure du pied de page). J'ai essayé de définir l'application z-index:-100; au contenu qui a fonctionné mais qui rend également le texte non sélectionnable. J'ai ensuite essayé d'appliquer z-index:1; au contenu, mais cela n'a pas fait apparaître le contenu sous l'en-tête/pied de page.

lien vers le site Web

enter image description here

//html
<div id="wrapper">
    <header>
        <div id="logo"></div>
        <nav>
            <ul>
                <li id="aboutNav"><a href="template.html">home</a></li>
                <li id="menuNav"><a href="">menu</a></li>
                <li id="specialsNav"><a href="">specials</a></li>
            </ul>
        </nav>  
    </header>
    <div id="content">
        content <br> goes <br> here <br>
        <a href="http://www.google.ca" target="_blank">google</a>
    </div>
</div>
<footer>
    <div id="thumbsDesc"></div>
    <div id="thumbs"></div>
</footer>



//css
header {
    width: 100%;
    height: 100px;
    background: url(../img/top.png) repeat-x;
    z-index: 110;
}

#wrapper #content {
    color: #FFFFFF;
    background: url(../img/body.png) repeat-y;
    width: 524px;
    padding: 25px 30px 25px 30px;
    position: absolute;
    bottom: 100px;
    top: 90px;
    margin: 0 0 0 150px;
    z-index: 1;
}

footer {
    margin: -107px 0 0 0;
    width: 100%;
    height: 107px;
    background: url(../img/bottom.png) repeat-x;
    z-index: 100;
}
htmlcss
20
Jon

Pour résoudre le problème, vous utilisez le z-index sur le pied de page et l'en-tête, mais vous avez oublié la position, si un z-index doit être utilisé, l'élément doit avoir une position:

Ajoutez à votre pied de page et en-tête ce CSS: 

position: relative;

ÉDITÉ:

A également remarqué que l'image d'arrière-plan sur le #backstretch a un index z négatif, ne l'utilisez pas, certains navigateurs deviennent vraiment bizarres ...

Supprimer de la #backstretch: 

z-index: -999999;

En savoir un peu plus sur Z-Index ici!

59
Zuul

Pour que z-index fonctionne, vous devez également lui donner une position:

header {
    width: 100%;
    height: 100px;
    background: url(../img/top.png) repeat-x;
    z-index: 110;
    position: relative;
}
4
Steve

Réglez votre position en-tête et pied de page sur "absolue" et cela devrait faire l'affaire. J'espère que cela aide et bonne chance avec votre projet!

1
rafaelbiten