Div superposable et focus sur l'arrière plan (z-index/pos:absolute)

Bonjour à tous,

En plein intégration, pour pouvoir respecté la créa, je me retrouve nez à nez face à un problème que je n'avais jamais rencontré, .

J'ai 2 div en positions absolute qui se superposent.
la div au premier plan contient une image en background semi transparente en png, elle à donc la propriété z-index supérieur car je veux la voir au premier plan.
Mais je voudrais pouvoir avoir le focus sur ma div d'arrière plan (contient formulaire, bouton..).

Est-ce possible? Si oui comment?
Modifié par Pik@chu (09 Jan 2012 - 00:50)

Je crois que tu pars réellement dans la mauvaise direction..!

Ton formulaire derrière un div superposé sera pour ainsi dire inutilisable, à moins d'utiliser pas mal de JS et encore... (surtout que niveau UI, ce genre de design me semble être une idée vraiment horrible)

À la limite,

Met ton image en arrière plan et utilise la transparence (opacity et RGBa) pour styler ton formulaire au dessus si tu veux un petit "footprint" de l'image de fond.

Tu pourrais aussi tenter d'utiliser une technique de ce genre : http://css-tricks.com/blurry-background-effect/

En gros utiliser ton image comme image de fond (donc pas au dessus) et pour les éléments de ton formulaire ou autre, utiliser cette même image de fond, en position fixed et la placer de façon à ce que l'ensemble coïncide.

Sinon en effet il te faudrait du JS pour récupérer l'emplacement du clic, retrouver l'élément qui se situe à cet endroit et lui passer le focus, avec le risque que ça foire si le visiteur a désactivé JS, etc etc... Un peu foireux comme solution à mon goût.

Si tu as un example ou que tu peux montrer le bout du design ça aiderait sûrement à piger un peu mieux le problème et éliminer les solutions pas applicables.

Sinon...

Je devais faire un truc semblable sur un projet aujourd'hui, et pour t'aider, il y a bien la propriété CSS:

div.overlay {
  pointer-event: none;
}

Cette propriété est supporté à partir de firefox 3.6, safari 4, Google Chrome et IE 9. Tu peux en lire plus sur le sujet ici:

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Modernizr permet de détecter le support de cette propriété (dans les bundle "Community add-on")

http://www.modernizr.com/download/

Tu pourrais donc offrir un fallback avec une image de fond si la propriété n'est pas supporté, et si elle l'est, tu affiche une div transparent en overlay de ton formulaire !

En espérant que ça puisse t'aider, mais avec ces infos, ce devrait être tout simple !!