web-dev-qa-db-fra.com

Le lien utilisant z-index ne peut pas être cliqué même s'il est en haut, dans Firefox et IE

J'essaie d'obtenir un lien texte pour apparaître au-dessus d'une image partiellement transparente, qui à son tour se trouve au-dessus d'un arrière-plan uni. Je veux que le texte du lien et l'image s'impriment lorsque la page est imprimée, mais pas l'arrière-plan coloré. (C'est pourquoi je n'utilise pas la propriété background-image)

Le problème est que bien que le lien apparaisse en haut de l'image et que l'image apparaisse en haut de l'arrière-plan comme souhaité, le lien ne peut pas être cliqué. Il me semble que si le lien apparaît en haut, il devrait être sensible aux événements de la souris ...

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

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

Voici du HTML pour illustrer 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>

À votre santé!

Alex

htmlcssz-index
27
Alex

Le problème est principalement dû à l'utilisation de valeurs d'index z négatives, ce qui semble obliger le div parent à capturer les événements de la souris. Utilisez des index positifs et affectez position:relative au lien pour obtenir le comportement attendu, car sans positionnement explicite, z-index ne fera rien.

56
shanethehat

Dans mon cas, je faisais face à des événements inexpliqués pointeur-événements en CSS (en particulier la valeur all), ce qui faisait que certains éléments capturaient des événements apparemment déclenchés par un autre (non-ancêtre! ) fait partie du DOM.

J'ai supprimé tout pointer-events à partir du CSS.

Je sais que cette question a déjà une réponse acceptée, mais mes symptômes correspondent à l'OP, alors peut-être que mon conseil pourrait aider un futur combattant comme moi.

6
The Red Pea

Deux notes:

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

2) [Modifié: non lié] Votre élément supérieur (avec avec z-index: 0) est situé à l'intérieur de votre élément d'arrière-plan (avec avec z-index : -2).

Les œuvres suivantes, vous pouvez jouer avec lui sur: 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
jjmontes

Aucune des solutions ci-dessus n'a fonctionné pour mon problème spécifique. Je recommanderais d'utiliser d'abord les solutions ci-dessus et si cela ne fonctionne pas, définissez les événements de pointeur sur aucun (ne fonctionne pas pour IE <= 10).

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

Vous pouvez aussi utiliser visibility: hidden pour le div qui recouvre l'élément cliquable en dessous.

Veuillez consulter cet article pour plus de détails: https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

1
connect2Coder