Collision entre les position fixed

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Collision entre les position fixed

Message par Necro Seth le Sam 15 Juin 2013 - 11:47

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 ~


Dernière édition par Necro Seth le Sam 15 Juin 2013 - 13:08, édité 1 fois

Necro Seth
Nouveau membre

Messages : 18
Inscrit(e) le : 17/04/2013

http://eleusis.forumactif.org/
Necro Seth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Collision entre les position fixed

Message par Adam_sfp le Sam 15 Juin 2013 - 13:00

Bonjour

Essayez en ajoutant z-index: 999;

dans la partie .navig de votre code.

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Collision entre les position fixed

Message par Necro Seth le Sam 15 Juin 2013 - 13:08

Et ça marche!
Je te remercie Adam!

Necro Seth
Nouveau membre

Messages : 18
Inscrit(e) le : 17/04/2013

http://eleusis.forumactif.org/
Necro Seth a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum