Explication détaillée du positionnement collant CSS

J'ai trouvé une bonne chose

Introduction : position:sticky est un nouvel attribut du positionnement CSS, il peut ; on dit qu'une combinaison de positionnement statique (pas de positionnement) et fixe ; il est principalement utilisé pour surveiller les événements de défilement, en termes simples, pendant le processus de glissement, lorsque la distance entre un élément et son élément parent atteint les exigences d'un positionnement collant ; tel que top : 100px) ; position : sticky équivaut à un positionnement fixe, fixé à la position appropriée

Avant de parler de positionnement collant, parlons des autres positionnements de position,

absolu : générer Les éléments positionnés absolus sont positionnés par rapport au premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

fixe : Génère un élément à position fixe, positionné par rapport à la fenêtre du navigateur (l'ancien IE ne le supporte pas). La position de l'élément est spécifiée par "gauche", "haut", "droite". et les attributs « bas ».

relatif : génère des éléments relativement positionnés par rapport à leur position normale sans rompre avec le flux de documents.

statique :

Par défaut, pas de positionnement, l'élément apparaît dans le flux normal du document (en ignorant les déclarations haut, bas, gauche, droite ou

z-index). hériter spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

Utilisation du sticky :

#sticky-nav {
    position: sticky;
    top: 100px;
}

Définir la position :sticky et donner l'un des (haut, bas, droite, gauche) en même temps

Conditions d'utilisation :

Les éléments parents ne peuvent pas avoir d'attributs overflow:hidden ou overflow:auto.

Une des quatre valeurs​​de haut, bas, gauche et droite doit être précisée, sinon elle ne sera qu'en positionnement relatif

La hauteur de l'élément parent ne peut pas être inférieur à la hauteur de l'élément collant

Les éléments collants ne prennent effet que dans leurs éléments parents

Pièges dans le projet

Description du problème :

Dans un petit projet de développement de programme ; le composant d'onglets est utilisé pour le positionnement collant, y compris le changement de barre d'onglets ; le bas de la barre d'onglets est un affichage d'un grand contenu de conteneur de liste ; le contenu d'affichage comprend des événements de clic (ou tactiles) ; événements) ; tests de clics dans les navigateurs iOS et PC C'est normal mais sur les téléphones Android ! ! ! ! Oh mon Dieu, ça a cliqué ! ! De plus, j'ai essayé de supprimer le saut de clic de l'élément dans le conteneur de liste, et j'ai constaté que le clic du commutateur d'onglet ne répondait pas et l'événement disparaissait ! ! ! Définissez des points d'arrêt pour voir la direction du flux d'événements : première capture d'événement -> onglet du nœud cible -> événement bouillonnant ; cette bulle est en fait apparue sur l'élément de la liste des conteneurs. . . C'est un cauchemar. Structure approximative du projet :

Structure HTML :

<div class="service-wrap">
        <tab>这是tab切换</tab>
        <div class="list-container">
            <!--for循环有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

Solution :

Lors de l'utilisation de l'onglet de la bibliothèque de composants, mettez un div dans la couche externe pour éviter pénétration des clics Et le flux anormal d'événements ou (une méthode qui traite les symptômes mais pas la cause profonde, selon le scénario commercial)

Le style de la bibliothèque de composants ne peut pas être modifié, sticky est utilisé comme le. style en ligne du composant onglet, car lorsque j'utilise cet onglet, directement en haut du point de vue, cela peut être réalisé en utilisant fix. J'ai défini position:fixed !import en dehors de la classe appelante ; la priorité la plus élevée du style remplace le style de positionnement dans la bibliothèque de composants, et tout est normal.

Tutoriels recommandés : "Tutoriel PHP" "Tutoriel 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!