Menu

Priorité d'affichage sur un swap div [Résolu]

Messages postés
246
Date d'inscription
mardi 24 février 2015
Dernière intervention
1 décembre 2018
- - Dernière réponse : lugdanum
Messages postés
30
Date d'inscription
vendredi 13 mai 2005
Dernière intervention
2 décembre 2018
- 1 déc. 2018 à 18:50
Bonjour,

j'ai utilisé un code provenant de codepen : https://codepen.io/jcoulterdesign/pen/zdwajv
il fonctionne très bien a un détail prés ...

j'ai ajouter des boutons sur certaine div a la place du lorem ipsum, mais malheureusement les div ce superpose de manière invisible, ce qui m’empêche de pouvoir interagir avec mes boutons car elle sont au dessus des boutons ...

avez vous un moyen de contrer ce soucis ?
j'ai pensé a Z-index mais cela ne semble pas bien fonctionner ...


merci beaucoup de votre future aide.
a très vite

Configuration: Windows / Chrome 70.0.3538.110
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
Messages postés
30
Date d'inscription
vendredi 13 mai 2005
Dernière intervention
2 décembre 2018
2
Merci
Hello

Par exemple au niveau du css tu ajoutes :
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


Dans ton html :
<div class='tab tab-1'>
        <h1>Prepare gift</h1>
        <p><button class="button">Shadow on Hover</button></p>
</div>


Et tu augmente un peu le top dans le css (en fonction de la taille nécessaire // hauteur div) :
body .progress_inner__tabs .tab {
  opacity: 0;
  position: absolute;
  top: 40px;
  text-align: center;
  margin-top: 80px;
  box-shadow: 0px 2px 1px #80b7d5;
  padding: 30px;
  background: white;
  border-radius: 10px;
  transition: all .2s;
}


->
  top: 150px;


EX : https://codepen.io/lugdanum/pen/rQoXyx

Tiens nous au courant....

Merci lugdanum 2

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM a aidé 33618 internautes ce mois-ci

astrocurieux
Messages postés
246
Date d'inscription
mardi 24 février 2015
Dernière intervention
1 décembre 2018
-
ca fonctionne super.
merci de ton intervention !!
lugdanum
Messages postés
30
Date d'inscription
vendredi 13 mai 2005
Dernière intervention
2 décembre 2018
-
Cool
@ une prochaine
Commenter la réponse de lugdanum