Comment définir un positionnement collant en CSS

Comment définir le positionnement collant en CSS : écrivez simplement [position:sticky] directement dans le sélecteur CSS. Le positionnement collant peut être considéré comme un hybride de positionnement relatif et fixe, dans lequel un élément est positionné relativement jusqu'à ce qu'il franchisse un certain seuil, puis devient fixe.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Comment définir le positionnement collant en CSS :

Sélection en CSS Écrivez simplement position:sticky directement dans le conteneur.

Le positionnement collant peut être considéré comme un hybride de positionnement relatif et de positionnement fixe. Les éléments sont positionnés de manière relative jusqu'à ce qu'ils franchissent un certain seuil, puis positionnés de manière fixe. Ce seuil spécifique fait référence à l'un des quatre seuils haut, droite, bas ou gauche. En d'autres termes, le positionnement collant ne peut prendre effet qu'en spécifiant l'un des quatre seuils haut, droite, bas ou gauche. Sinon, le comportement est le même que pour le positionnement relatif.

Il existe un concept de « boîte de flux » dans le positionnement collant, qui fait référence à la boîte de taille de l'élément défilant le plus proche (l'élément dont la valeur de l'attribut de débordement n'est pas visible) de l'élément de positionnement collant s'il y en a. aucun élément déroulant, représente la boîte de fenêtre du navigateur.

Écrivez simplement position:sticky directement dans le sélecteur CSS. Plus d'exemples. Les points principaux sont de souligner les points suivants :

1. La position de l'élément collant est uniquement relative au. premier Un élément de bloc parent avec mécanisme de défilement (un élément avec débordement défini sur overflow/scroll/auto/overlay) est positionné à la place de l'élément de bloc parent. Exemple de Codepen

2. Cela ne fonctionnera que lorsque la direction correspondante (haut/droite/bas/gauche) est définie, et peut être superposée les unes aux autres, et quatre directions peuvent être définies en même temps.

3. Même si position: sticky est défini, il ne peut être affiché que dans la zone de contenu de l'élément de bloc parent. Il ne peut pas dépasser cette zone sauf si vous définissez une valeur négative.

4. Position : sticky ne déclenchera pas bfc Pour faire simple, les éléments flottants ne seront pas calculés lors du calcul de la hauteur.

5. Lorsque la position on: sticky est définie, le positionnement interne sera relatif à cet élément (exemple codepen)

6 Bien que position: sticky se comporte comme relatif ou fixe, il l'est donc. Leur niveau peut être défini via z-index. Lorsque les nœuds frères derrière cet élément couvriront cet élément, le niveau peut être ajusté via z-index. (exemple codepen)

7. Lorsque l'élément parent d'un élément de mise en page collant est dans la plage visible, la mise en page de l'élément est relative, sinon elle est fixe.

Recommandations associées : 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!