web-dev-qa-db-fra.com

CSS toujours au top

J'ai un site Web avec une image fixe en haut de mon écran. Lorsque je fais défiler ma page, l'image reste en haut, comme il se doit. Cependant, tout le contenu ci-dessous chevauche mon image et celle-ci est ensuite couverte.

Comment faire pour que ma barre supérieure (image) reste toujours au top? Je veux qu'il couvre le contenu de la page lorsque vous faites défiler.

htmlcssimage
31
user3130731

Assurez-vous que position est sur votre élément et définissez la valeur z-index à une valeur supérieure aux éléments à couvrir.

element {
    position: fixed;
    z-index: 999;
}

div {
    position: relative;
    z-index: 99;
}

Cela demandera probablement plus de travail que cela, mais c'est un début puisque vous n'avez posté aucun code.

46
Jared Eitnier

En supposant que votre balisage ressemble à:

<div id="header" style="position: fixed;"></div>
<div id="content" style="position: relative;"></div>

Maintenant les deux éléments sont positionnés; Dans ce cas, l'élément en bas (dans l'ordre des sources) couvrira l'élément au-dessus de lui (dans l'ordre des sources).

Ajouter un z-index sur l'en-tête; 1 devrait suffire.

9
Salman A