Une analyse approfondie du contexte en cascade en CSS

Cet article parlera du contexte en cascade en CSS et comparera les niveaux en cascade à travers des exemples. J'espère qu'il sera utile à tout le monde !

Il y a quelque temps, l'entreprise a commencé à promouvoir le commerce des plateformes low-code, et j'ai eu la chance d'y participer. Pendant cette période, le contexte en cascade des CSS a été impliqué, et cela m'a causé quelques problèmes. Afin de mieux implémenter la logique métier, j'ai pensé qu'il serait préférable d'étudier en profondeur le contexte en cascade des CSS. Tout le monde doit savoir que les pages Web sont en deux dimensions, mais le contenu est en trois dimensions. En plus des x et y plus intuitifs, il existe également un axe z qui n'est pas très intuitif.

Éléments de contexte en cascade

Dans notre processus de développement quotidien, il existe plusieurs attributs couramment utilisés impliquant un contexte en cascade :

• position : absolue | collante relative | | right

• transform

• Comparaison de niveau d'empilement

Comparaison de niveau simple sans impliquer l'imbrication des ancêtres et des petits-enfants :

• z-index : -1 0

Lorsqu'un contexte d'empilement a été généré impliquant un élément ancêtre, le niveau d'empilement de l'élément descendant sera affecté par l'élément ancêtre.

Remarque : La hiérarchie des contextes en cascade est un enfant de la hiérarchie des éléments HTML, car seuls certains éléments créent des contextes en cascade. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement seront assimilés par le contexte d'empilement parent.

Problèmes pratiques

Dans le processus d'implémentation visuelle, nous avons rencontré un problème : lors du processus de glisser-déposer des niveaux imbriqués, en raison des problèmes hiérarchiques déjà existants sur les éléments parents imbriqués, les éléments ancêtres étaient affectés par l'ancêtre. L'impact est que lors du glissement, il sera couvert par des éléments du "flux de document normal". Après une période de recherche, il a été constaté que le problème était dû à l’influence de différents contextes d’empilement.

Combat pratique

1. Comparaison de contextes en cascade au même niveau

Comme il y a trop de code, je ne perdrai pas de place pour le montrer ici, je montrerai directement les résultats de mon opération. A travers les images ci-dessous, nous pouvons confirmer la comparaison hiérarchique des mêmes niveaux mentionnés ci-dessus.

2. Comparaison des contextes d'empilement de différentes positions

Pour la position, sans utiliser z-index, le contexte d'empilement de l'élément brother est supérieur au contexte d'empilement de l'élément brother. En termes humains, cela signifie que le contexte en cascade des éléments suivants est supérieur à celui des éléments précédents.

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. Comparaison des niveaux d'empilement dans différents contextes d'empilement

Tout d'abord, reproduisons les problèmes pratiques mentionnés ci-dessus et implémentons les niveaux d'empilement dans différents contextes d'empilement.

Le bloc rouge et le bloc vert sont deux éléments du même niveau. Le niveau d'empilement rouge est supérieur au niveau d'empilement vert. Par conséquent, les deux éléments du bloc rouge ont un niveau d'empilement inférieur au niveau d'empilement. élément de bloc orange, mais l'effet réel est Oui, l'orange a un niveau d'empilement inférieur à celui des autres éléments de bloc.

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

Ici, permettez-moi de mentionner ma solution au problème ci-dessus, qui consiste à modifier dynamiquement le niveau d'empilement des éléments ancêtres. Cependant, je pense personnellement que cette méthode doit être étudiée. Elle est lourde lorsqu'il existe de nombreux niveaux d'imbrication. Si quelqu'un a un meilleur moyen, veuillez laisser un message ci-dessous.

(Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS

)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!