J'ai un div qui est absolument positionné de sorte que je peux le placer chevauchant une image. le problème est que la partie vide du div rend l'image sous-jacente non cliquable. dans IE l'image est encore cliquable mais en FF ou en chrome son non/chevauchement div couvre l'image et le rendre non-cliquable
Vous ne pouvez pas résoudre ce problème par CSS seul. Le plus simple est de définir l'événement div onclick sur la même fonction que votre image onclick.
Ajouter position: relative; à l'image. Voici un SSCCE, copier et coller.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2750416</title>
<style>
#overlap {
position: absolute;
width: 100%;
height: 61px;
background: pink;
}
img {
position: relative; /* Without it, the image disappears "behind" div */
float: right;
}
</style>
</head>
<body>
<div id="overlap">Overlap</div>
<img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
</body>
</html>
Vous pouvez utiliser la fonction expérimentale CSS4 pointer-events:none sur votre élément absolu. Le problème avec cette fonctionnalité est qu'elle ne fonctionne pas dans tous les navigateurs, seulement firefox et chrome autant que je sache. Juste partager un peu d'information :)
pouvez-vous écrire cette fonction? – TomBs
à quoi ressemble votre fonction image onclick? – fearofawhackplanet