CSS z-index et hover

Fermé

Dfordanger Messages postés 7 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 30 juin 2014 - 8 mars 2012 à 15:54
Profil bloqué - 28 mars 2013 à 10:13

Bonjour,

J'ai trois div placés dans un même contenant (div "wrapper") et j'aimerais que chacune d'entre elle grandissent (pour faire apparaître des infos supplémentaires) sans déplacer les autres div.

L'autre problème c'est qu'à cause du reste de la page, je ne peux pas trop utiliser de positionnement absolu.

En gros mon code ressemble à ça:

<head>
    <title>Demo</title>

<style type="text/css">
.logo {
width:100px; height:100px; margin-top:5px; margin-left:5px; background-color:#123456;

position:relative; z-index:0; float:left;
}

.logo:hover { 
width:200px; height:120px; background-color:#654321;

z-index:1000; 
}
</style> 
</head>

<body>
	<div class="logo">Test1</div>
	<div class="logo">Test2</div>
	<div class="logo">Test3</div>
	
</body>

Chaque div s'agrandit bien lors du passage de la souris, mais semble ne pas tenir compte du z-index, donc les div adjacents se déplacent vers la droite.

Quelqu'un a une astuce pour éviter ça ?

Merci d'avance !

A voir également:

CSS z-index et hover
Code ascii de a à z - Guide
Cpu z pc - Télécharger - Informations & Diagnostic
Index téléphonique - Guide
Free z - Guide
Trait css ✓ - Forum CSS

1 réponse

Réponse 1 / 1

Profil bloqué
28 mars 2013 à 10:13

Salut,

Le problème c'est qu'avec position:relative; tu leur dis de se positionner les uns par rapport aux autres donc... ça fait ce que tu décris.

<head>
<title>Demo</title>

<style type="text/css">
.logo {
width:100px; height:100px; margin-top:5px; margin-left:5px; background-color:#123456;

position:fixed; z-index:0; float:left;
}

.logo:hover {
width:200px; height:120px; background-color:#654321;

z-index:1000;
}
</style>
</head>

<body>
<div class="logo">Test1</div>
<div class="logo" style="margin-left:110px;">Test2</div>
<div class="logo" style="margin-left:215px;">Test3</div>

</body>

Discussions similaires

télécharger sur des sites comme index of

A quoi sert CPU-Z ?

Index+Equiv avec 3 critères

Samsung Z Flip 4 s'éteint lorsque je le plie.

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters