Utilisation d'Onclick pour les éléments à faible indice-z

Voici mon problème - J'ai besoin d'accéder en quelque sorte à l'onclick d'un élément qui est couvert par un autre élément de z-index plus élevé. Je sais que cela va à l'encontre de z-index, mais des idées?Utilisation d'Onclick pour les éléments à faible indice-z

Dans l'exemple ci-dessous, seul le petit ruban supérieur de la boîte rouge est cliquable. J'ai une conception de page Web où les onglets qui doivent être cliquables sont recouverts par une barre artsy ... J'aimerais si il y avait un moyen (peut-être un truc javascript?) Pour utiliser onclick pour ces éléments z-index obscurci sans changer n'importe quel positionnement, bien que mon instinct ne soit pas bon.

<html> 
<head> 
    <style type="text/css"> 

     #bg { 
      position:absolute; 
      width:500px; 
      height:500px; 
      background:pink; 
     } 
     #under { 
      cursor:pointer; 
      margin-top:-10px; 
      background:red; 
      width:50px; 
      height:50px; 
      z-index:0; 
     } 
     #over { 
      position:absolute; 
      width:900px; 
      height:50px; 
      margin-top:10px; 
      z-index:100; 
     } 
    </style> 
</head> 
<body> 
    <div id="bg"> 
     <div id="under" onclick="alert('hi');">aaa</div> 
    </div> 
    <div id="over"></div> 
</body>

Source

2010-09-24 Amalgovinus

je le ferais avec un PNG transparent dans un DIV au-dessus de la barre artsy avec les mêmes dimensions que votre cliquable z-index le plus bas DIV.

Soyez conscient des problèmes d'Internet Explorer.

J'ai utilisé la technique plusieurs fois.

Source

2010-09-24 02:24:15 nottinhill

Merci de m'avoir donné la réponse. Faites-nous savoir si cela fonctionne. – nottinhill

La méthode de remplacement habituelle consiste à placer les éléments "over" (positionnés absolument) à l'intérieur des éléments "under" (positionnés soit relativement soit absolument) et à rendre le contenu de la même taille (Gilder/Levin Image Replacement).

Source

2010-09-24 02:35:10

Mais un élément ne peut pas avoir un z-index plus élevé que son parent. – Amalgovinus

Oh, oui c'est possible. Tout ce qui est visible sur une page Web est un descendant de l'élément body, et vous pouvez certainement définir des éléments sur la page à un z-index plus haut que le corps. J'ai personnellement construit plusieurs dizaines de sites Web au cours de la dernière décennie qui utilisaient exactement cette méthode, car c'était la seule méthode accessible-off/css-on pour le remplacement d'image connue au moment où elle a été introduite. –

J'étais confus, il semble qu'un élément ne peut pas avoir un index z inférieur à son parent. – Amalgovinus

Utilisation d'Onclick pour les éléments à faible indice-z

Répondre

Questions connexes