Explication détaillée des propriétés fixes des propriétés de positionnement CSS-tutoriel CSS-php.cn

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

7861 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur css, 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.

É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:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            h2.pos_abs {
                position: fixed;
                left: 100px;
                top: 120px
            }
            p{
                height: 100px;
                background-color: palegoldenrod;
            }
            p.p2{
                margin-top:120px ;
            }
        </style>
    </head>
 
    <body style="height: 1200px;">
        <h2 class="pos_abs">这是带有固定定位的标题</h2>
        <p>相对于浏览器窗口来对元素进行定位</p>
        <p class="p2">相对于浏览器窗口来对元素进行定位</p>
    </body>
 
</html>

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