Le lien utilisant z-index ne peut pas être cliqué même s'il est sur le dessus, dans les deux Firefox & IE

j'essaie de faire apparaître un lien texte au-dessus d'une image partiellement transparente, qui à son tour se trouve au-dessus d'un fond de couleur unie. Je veux que le lien-texte et l'image s'impriment lorsque la page est imprimée, mais pas le fond coloré. (C'est pourquoi je ne suis pas en utilisant le background-image propriété

le problème est que bien que le lien apparaisse au-dessus de l'image, et que l'image apparaisse au-dessus de l'arrière-plan comme désiré, le lien ne peut pas être cliqué. Il semble pour moi que si le lien apparaît sur le dessus, alors il devrait être sensibles aux événements de la souris...

cela se produit dans au moins les navigateurs suivants: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) et Internet Explorer 7.

quelqu'un pourrait-il me dire si c'est un problème avec mon HTML/CSS, ou avec les navigateurs?

voici un peu de HTML pour démontrer le problème:

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

Cheers!

Alex

25
demandé sur Alex 2011-08-30 19:42:37
la source

4 ответов

le problème est principalement causé en utilisant des valeurs négatives de l'indice z, ce qui semble faire que le div parent capture les événements de la souris. Utilisez des index positifs, et assignez position:relative au lien pour obtenir le comportement attendu, car sans positionnement explicite z-index ne fera rien.

53
répondu shanethehat 2011-08-30 20:03:35
la source

Deux remarques:

1) l'attribut z-index ne peut être utilisé que sur des éléments positionnés (absolus, relatifs ou fixes). Votre élément n'est pas.

2)[Édité: Pas liés] votre élément supérieur (le avec z-index: 0) est situé à l'intérieur de votre élément d'arrière-plan (le avec z-index: -2).

Les ouvrages suivants, vous pouvez jouer avec elle à: http://jsfiddle.net/5MpFn/

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  



    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>
4
répondu jjmontes 2011-08-31 13:30:14
la source

Dans mon cas, je m'occupais de quelque chose d'inexpliqué pointeur-événements dans CSS (spécifiquement la valeur all), ce qui a fait que certains éléments ont saisi des événements apparemment déclenchés par un autre (Non-ancêtre!) la partie de la DOM.

j'ai enlevé tous pointer-events De La CSS.

je sais que cette question a déjà une réponse acceptée, mais mes symptômes correspondent à L'opération, donc peut-être que mon conseil pourrait aider un futur combattant comme moi.

4
répondu The Red Pea 2017-01-19 06:44:35
la source

Aucune des solutions ci-dessus sont travaillé pour mon problème spécifique. Je recommande d'utiliser les solutions ci-dessus en premier et si cela ne fonctionne pas, définissez les événements pointeur à none (ne fonctionne pas pour IE<=10).

.some-horizontal-container {
  pointer-events: none;
}

Vous pouvez également utiliser visibility: hidden pour les div qui se superpose à l'élément cliquable sous elle.

https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

0
répondu connect2Coder 2018-09-24 02:13:10
la source

Autres questions sur