Menu

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

Messages postés
279
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
16 avril 2019
- - Dernière réponse : lugdanum
Messages postés
38
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
21 janvier 2019
- 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
approuvée par Jean-François Pillou le 1 déc. 2018
Messages postés
38
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
21 janvier 2019
11
3
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....

Dire « Merci » 3

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

CCM 40317 internautes nous ont dit merci ce mois-ci

astrocurieux
Messages postés
279
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
16 avril 2019
3 -
ca fonctionne super.
merci de ton intervention !!
lugdanum
Messages postés
38
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
21 janvier 2019
11 -
Cool
@ une prochaine
Commenter la réponse de lugdanum