Discussion :

[Xunil]

Bonsoir,

Je rencontre un léger problème pour mettre en premier plan un élément a dans une liste par rapport à l'élément a qui le suit.

Mon but est de faire un petit effet en agrandissant légèrement l'élément survolé dans une liste de numérotation de page.

J'ai mit une image pour bien comprendre le problème.

Le code en question :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul class="pagination">
   <li><a href="page.php?page=1#com" class="">1</a></li>
   <li><a href="page.php?page=2#com" class="">2</a></li>
   <li><a href="page.php?page=3#com" class="">3</a></li>
   <li><span>4</span></li>
   <li><a href="page.php?page=5#com" class="">5</a></li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
ul.pagination{
   background: none;
   border: none;
   list-style-type: none;
   font-size: 13px;
   height: 22px;
   z-index: 1;
}
 
ul.pagination li{
   position: relative;
   float: left;
   text-align: center;
   z-index: 1;
   width: 16px;
   height: 22px;
}
 
ul.pagination li span{
   font-weight: 700;
   display: block;
   width: 16px;
   height: 20px;
   line-height: 20px;
   border: 1px solid #d0d0d0;
   background: #f0f0f0;
   z-index: 1;
}
 
ul.pagination li a{
   display: block;
   width: 16px;
   height: 20px;
   line-height: 20px;
   border: 1px solid #d0d0d0;
   border-right: 1px solid transparent;
   background: #f0f0f0;
   z-index: 1;
}
 
 ul.pagination li a:hover{
   position: absolute;
   top: -1px;
   left: -2px;
   width: 20px;
   height: 22px;
   line-height: 22px;
   z-index: 2 !important;
 }
 
 ul.pagination .last{
   border-right: 1px solid #d0d0d0;
}

Le z-index du a:hover ne prime pas sur le z-index du a ou span suivant.

Auriez-vous une idée, de comment forcer ceci ?

Merci d'avance.

[tiesto95]

Je vois que tu as des z-index sur des elements non positionnéé ça ne fonctionneras pas.Il faut que tu position avec l'atrribut position:fixe,relative,absolute etc.. chaque element que tu souhaite faire un z-index.Voila en esperant t'avoir aidé

[Xunil]

Merci de l'info, je ne me rappelais plus qu'il fallait un positionnement pour utiliser le z-index.

Mais malgré tout, cela n'arrange pas mon problème, le survol de l'élément a, passe toujours en dessous de celui qui suit.