Discussion :

[Sinouhé87]

Bonjour, je découvre actuellement le CSS donc désolé si je dis une bêtise.

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<button class="btn">
    Survole moi!
    <div class="btn__bg"></div>
</button>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$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 ?

[Sinouhé87]

Ah je crois avoir compris :

«... 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/doc...ent_de_couches

[NoSmoking]

Bonjour,
tout d'abord ton code SCSS ne nous aide pas à voir rapidement si il y a une erreur, il est préférable de poster directement le code CSS.

Je ne saisi pas trop pourquoi tu passes par un élément ajouté et pas directement en jouant sur le background du <button> !