Collision entre les position fixed

[Necro Seth]

Bonjour,

Bon ça fait un moment que j'ai un problème avec des éléments de mon forum, qui se superpose, mais pas comme je le voudrai.
Voici le lien de mon forum test:
http://forumtest-eleusis.forumactif.com/

Je vous explique maintenant ce qui cloche:
J'ai la barre de navigation et le petit widget "test" du lapin qui disparaisse sous la PA et les images des forums. Je sais que c'est une histoire de position:fixed dans le CSS, mais je ne sais pas comment le régler. J'ai essayé de passer en position:absolute et tout, mais ça me déforme le tout. Donc je me demandais s'il n'y avait pas des espèces de "priorités" sur les position:fixed?

voici donc mon CSS:

Code:


.widget_flottant
{
width: 150px;
height: 100px;

position:fixed;
top: 50px;
right: 10px;
}
.navig {
  font: Alice, sans-serif;,Verdana,Arial,Helvetica;
margin-left: -8px;
position: fixed;
top: 0px;
width: 100%;
background-color: #140926;  
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion { text-align: left; font: Bubblegum Sans,Verdana,Arial,Helvetica }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 { 
  color: black;
    font-size: 16px;    
  font-weight: normal;
  margin: 0; 
  z-index: 100; 
  position: absolute; 
  top: 0; 
  left: 0; 
  -webkit-transform: translateX(-100%) rotate(-90deg); 
  -webkit-transform-origin: right top; 
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top; 
  -o-transform: translateX(-100%) rotate(-90deg); 
  -o-transform-origin: right top; 
  transform: translateX(-100%) rotate(-90deg); 
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}
.accordion .slide > h2 span { 
    display: block; 
    padding-right: 8%; 
    text-align: right; 
    height: 90%;
    margin-top: 5px; 
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b { 
    display: inline-block; 
    position: absolute; 
    top: 13%; 
    left: 10%; 
    text-align: center; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion { 
    border: 9px solid #A6B2DE; 
    border-bottom-width: 8px; 
    padding: 5px 5px 6px 0; 
    background: #1C132C; 
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); 
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #1C132C; text-shadow: 0 -1px 0 #1C132C; line-height: 265% }
.accordion .slide > h2 span { background: #A6B2DE; color: white }
.accordion .slide > h2 b { background: #A6B2DE; color: #4d4d4d; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover { 
    background: #1C132C;
    background: -moz-linear-gradient(left,  #A6B2DE 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353947), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #A6B2DE 0%,#555555 100%);
    background: -o-linear-gradient(left,  #A6B2DE 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #A6B2DE 0%,#555555 100%);
    background: linear-gradient(left,  #A6B2DE 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b { 
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #1C132C; margin-left: 5px }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }
.lock   {
   position: relative;
   width: 600px;
  height: 150px;
   cursor: pointer;
}
.lock .lock-hidden {
   /* positionnement du bloc qui apparait */
   display: none;
   position: absolute;
   top: 10px;
   left: 5px;
   
   /* style du bloc qui apparait */
   border: 2px dotted #A6B2DE;
   border-radius: 5px;
  width: 570px;
  height: 120px;
    padding: 5px;
   background-color: #F0F3FF;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: justify;
}
.lock:hover .lock-hidden {
   display: block;
}

Voilà, si quelqu'un peut me donner un coup de main sur ce sujet, je lui en serai grandement reconnaissant, en sachant que je veux juste passer mon widget et ma barre de navigation devant le tout.

Merci d'avance ~

[Adam_sfp]

Bonjour

Essayez en ajoutant z-index: 999;

dans la partie .navig de votre code.

Cdt.

[Necro Seth]

Et ça marche!
Je te remercie Adam!