Bonjour, je lis actuellement le chapitre "Animez les couleurs de manière performante avec opacity" du cours "Créez des animations CSS modernes".

Le but du code suivant est de faire changer la couleur d'un bouton quand on le survole :

<button class="btn">
    Survole moi!
    <div class="btn__bg"></div>
</button>

$border-rad: 2rem;
$clr-btn: #15DEA5;
.btn {
    border-radius: $border-rad;
    background-color: $clr-btn;
    position: relative;
    z-index: 1;
    &:hover {
        & .btn__bg {
            opacity: 1;
        }
    }
    &__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: darken($clr-btn, 5);
        opacity: 0;
        z-index: -1;
        transition: opacity 250ms;
    }
}

Je sais que l'élément ayant la valeur de z-index la plus élevée sera placé par dessus les autres.

Donc .btn est placé au dessus de .btn__bg (ce dernier est donc caché par .btn).

Quand je vais survoler .btn, .btn__bg va passer de transparent à opaque avec une transition de 250ms.

Mais comme .btn__bg est caché en dessous de .btn, je ne devrais rien voir et pourtant si...tout marche comme prévu. Il y a un truc que j'ai mal compris.

Pouvez-vous m'aider svp ?

Lou

.btn est placé au dessus de .btn__bg

Non, parce que .btn__bg est enfant de .btn. Le z-index négatif sert à le faire passer sous le texte uniquement.

Par contre cette méthode me semble vraiment overkill 🤔

Ok merci je crois comprendre.

«... En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.»

Source : https://developer.mozilla.org/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches

-
Edité par Xysmath87 17 septembre 2020 à 16:19:41