Maison> interface Web> tutoriel CSS> le corps du texte

Explication détaillée des propriétés fixes des propriétés de positionnement CSS

WBOY
Libérer: 2022-08-02 18:09:15
original
7692 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes surcss, qui introduit principalement des problèmes liés au positionnement fixe dans les attributs de positionnement CSS. Le positionnement fixe signifie que la position de l'élément est une position fixe par rapport à la fenêtre du navigateur, même si la fenêtre l'est. ne bougera pas même lors du défilement. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

Explication détaillée des propriétés fixes des propriétés de positionnement CSS

(Apprentissage du partage vidéo:CSS Tutorial vidéo,html Tutorial vidéo) par rapport au navigateur La fenêtre est dans une position fixe.

Il ne bougera pas même si la fenêtre défile :Le positionnement fixe est la position où l'élément est fixe dans la zone visible du navigateur. Scénario d'utilisation principal : la position de l'élément ne changera pas lors du défilement de la page du navigateur.

Syntaxe :

选择器{position:fixed;}
Copier après la connexion

Description

Le positionnement fixe est la position où l'élément est fixe dans la zone visuelle du navigateur. Le positionnement fixe peut également être considéré comme un type particulier de positionnement absolu.

Le scénario d'utilisation est que lorsque la page du navigateur défile, la position de l'élément ne changera pas.

    Caractéristiques du positionnement fixe
  • Éléments mobiles qui utilisent la fenêtre visuelle du navigateur comme point de référence.

n'a rien à voir avec l'élément parent.

Ne faites pas défiler avec la barre de défilement.
  • Le positionnement fixe n'occupe pas la position d'origine. Le positionnement fixe est également hors AMM.
  • fixed est la valeur de l'attribut position. Lorsque l'attribut position d'un élément est défini sur fixe, l'élément est fixe et l'élément fixe ne changera pas de position lorsque la barre de défilement est déplacée. La position des éléments positionnés de manière fixe ne change pas dans le champ de vision.
  • Le positionnement fixe et le positionnement absolu sont similaires. Ils permettent tous deux de déplacer et de séparer des éléments du flux de documents.

    Syntaxe :
  • position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;
    Copier après la connexion
  • "position:fixed;" est utilisé en combinaison avec les quatre attributs top, bottom, left et right "position:fixed;" fait de l'élément un élément de positionnement fixe, puis utilise top, bottom, Les quatre attributs left et right permettent de définir la position de l'élément par rapport au navigateur.

    Les quatre attributs haut, bas, gauche et droite ne sont pas tous utilisés. A noter que les objets de référence de ces quatre valeurs sont les quatre bords du navigateur.
Le exemple est le suivant:

     

这是带有固定定位的标题

相对于浏览器窗口来对元素进行定位

相对于浏览器窗口来对元素进行定位

Copier après la connexion

output Résultat:

Connaissances axées case de positionnement à gauche : 50% , accédez à l'emplacement général de la zone du navigateur.


Ensuite, laissez le positionnement fixe et les mots en marge gauche : le contenu principal règle la largeur à la normale, afin que nous puissions voir le positionnement fixe et les mots sur le côté droit du centre de la page

Explication détaillée des propriétés fixes des propriétés de positionnement CSS

Remarque :Lorsque nous ne plaçons pas la boîte fixe en haut, elle sera couverte par d'autres divs. Assurez-vous de placer la boîte fixe en haut

(Partage vidéo d'apprentissage :

Tutoriel vidéo CSS

,
    html. tutoriel vidéo
  • )

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!