Bloc non réactif après position:fixed

Bonjour,

Contexte : j'ai une balise header auquelle j'ai appliqué ces styles :

position: fixed;
top: 0;
z-index: -10;
width: 100%;

(Cette balise est directement suivit par le reste du code, englobé dans une balise à l'identifiant #wrapper ayant un margin-top pour espacer le contenu du header. Le but étant qu'au scrolling, le #wrapper vienne recouvrir le header.)

Le problème est que dans le header, plus rien réagit à la souris. Pas moyen de sélectionner de texte, ni même de déclencher le pseudo-élément :hover sur les liens. Rien à signaler dans le wrapper.
Je ne comprends pas d'où ce la peut venir… Il n'y a pourtant aucun bloc "invisible" qui pourrait s'être superposé et empêcher l'interaction.

Je vous écoute Merci à vous.

Bonjour,

pourquoi z-index: -10 ?
Avec cette valeur, ton header est probablement derrière le body...
Pourquoi ne pas mettre 1, et ton wrapper en 2 ?

Si jamais ça n'a rien à voir, une page d'exemple sera la bienvenue

Justement, parce que le header sera derrière le wrapper, j'ai ajouté un margin-top (comme mentionné dans mon post ). Cela aura pour effet une animation lors que l'utilisateur descendra dans la page : le wrapper va venir recouvrir le header. Ce qui est difficilement visible sur une image.

J'ai testé le z-index en restant dans les positifs. J'ai attribué un 1 au header et un 2 au wrapper (ce qui implique de positionner le wrapper à l'aide d'un position:relative puisqu'il ne l'était pas jusqu'à présent). Et là, ça fonctionne, mon texte est de nouveau sélectionnable. Pourquoi ? Je n'en ai pas la moindre idée.

Je n'ai pas eu recours à des bidouilles, mais ça me dérange quand même d'avoir à positionner mon wrapper et lui appliquer un z-index.

Voici un exemple : http://www.googleventures.com/
Scrollez vers le bas et admirez

Et bien en réalité tu n'as pas le choix : par défaut le body est sur le calque 0. Ce qui implique qu'un élément en calque négatif (-10 dans ton cas) passe en-dessous - et est donc "masqué" ou "recouvert" par le body, ce qui le rend non sélectionnable.

En réalité, il ne fallait pas descendre ton header dans les calques mais plutôt monter ton wrapper pour qu'il soit au-dessus, puisqu'il s'agissait bien de cela. Et la logique est différente, du coup.

C'est un problème assez courant dans l'utilisation des z-index, simplement une question de logique.

Mais si j'ai bien suivi, ton problème est donc résolu ?

Oui, de mon côté puisque cela est fonctionnel, c'est résolu. Cependant je me pose ces questions :

1. Si le body est sur le calque 0, peut-on considérer que par défaut, body est un élément positionné ?
2. Sur la page partagée (Google Ventures), l'équivalent de mon wrapper (<div class="masonry">) reçoit ces déclarations :

postion: relative;
z-index: 2;

Et l'équivalent de mon header lui-aussi est positionné (position: fixed) mais avec un z-index négatif. Ma question est : pourquoi le même problème ne survient pas et que le texte reste sélectionnable alors qu'en théorie, le body recouvre ce header ?
Modifié par Foxz (26 Nov 2012 - 19:10)