probleme de superposition

Version imprimable

Bonjour, je suis en train de faire un slider avec un formulaire qui se masque/s'affiche, avec un effet glissé quand on clique sur un lien ( en forme de bouton +/- demi cercle) juste en dessous. Ma fonction JQuery fonctionne pas de souci.

La moitié de mon cercle s'incruste dans le formulaire avec un margin-top négatif:
Code:

1 2 3 4 5 6 7 8 9 10 11 a.circle { position: absolute; margin-top: -80px; display:block; height: 80px; width: 80px; text-align: center; border-radius: 80px; // .... etc pour autres navigateur // et la technique behavior: url(/PIE.htc); pour anciens IE }
Ces éléments sont dans un div #contenu, mais quand je masque le formulaire la partie du cercle qui sort de #contenu se superpose sur de tout ce qu’il y a au dessus de #contenu (menu, header etc…).
Et je ne veux voir que la moitié du cercle dans contenu.

j'ai essayé de mettre mes div menu etc en :

Code:

position: relative;
Code:

1 2 z-index: 9999;
et a.circle en :

Code:

1 2 position: relative; z-index: -10; // -100 - 10000 ...

Rien ne fait. Je me bats avec des z-index et des position depuis des heures. Voilà la structure css de ma page :
http://s400959532.onlinehome.fr/structure-css.jpg

Avez-vous une idée de ce que je dois faire?

18/02/2012, 00h17
omdafer

Je ne vais quand même pas mettre des absolute un peu partout juste pour empêcher mon a.circle de se superposer aux autres éléments quand il sort du cadre de div#contenu, ce n'est pas très propre.

Ah mais oui!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
<div id="menu">...</div>
...
...
<div id="contenu">
   <div id="slider"> // Parent de #form et .circle
      <form id="form" ... > //Le formulaire afficher/masquer
         ...
      </form>
      <a class="circle" ... ><p>+</p></a> //Le cercle action slide absolute
   </div>
</div>
...

:aie: J'ai pas mis #slider en position "relative". Donc le .circle en position "absolute" n'a pas de parent "relative" en référence.
Le a.circle ne se balade plus n'importe où. J'ai donc :

Code:

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
#contenu{ /* En surclasse pour avoir le slide à ras */
  overflow:hidden; /* .circle peux déborder du cadre de #contenu sans se superposer  */
  padding-top:0px;
}
 
#slider{
 position:relative; /*Parent en relative*/
 margin: 0 auto 40px; /*Marge de sécu en bas pour le .circle en absolute reste visible */
 width: 442px;
}
 
#form{
 position: relative;
 background: #e4e4e4;
 padding: 20px;
 margin-top:0px;
 border-radius: 0px 0px  10px 10px;
 behavior: url(/PIE.htc); /*  Astuce coin arrondie sous IE */
 -webkik-border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px  10px 10px;
 -ms-border-radius: 0px 0px  10px 10px;
 -o-border-radius: 0px 0px  10px 10px;
 display:none;
}
 
.circle{
 background: #e4e4e4;
/* En cercle */
 -webkik-border-radius: 80px;
 -moz-border-radius: 80px;
 -ms-border-radius: 80px;
 -o-border-radius: 80px;
 border-radius: 80px;
 behavior: url(/PIE.htc); /* Prise en charge coin arrondie sous IE */
 height: 80px;
 width: 80px;
 left:184px; /* Centré sur #form */
 bottom: -30px; /* remonte la moitié du cercle inscruté dans #form
 position: absolute;
 text-align: center;
 display:block;
}
 
.circle p{ /* centré le +/- au milieu du demi cercle */
 font-size: 28px;
 color:#617789;
 text-align:center;
 padding-top:20px;
 padding-left:33px;
}

Pour le coup des z-index ne servent à rien, vu que "overflow:hidden" fait bien son boulot.