CSS z-index et hover
Dfordanger
Messages postés
7
Date d'inscription
Statut
Membre
Dernière intervention
-
Profil bloqué -
Profil bloqué -
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:
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 !
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
- Gpu z - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
1 réponse
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>
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>