Qu'est-ce que le positionnement CSS

藏色散人
Libérer: 2023-01-05 16:07:49
original
3277 Les gens l'ont consulté

Le positionnement CSS comprend : 1. statique, ce qui signifie positionnement statique ; 2. relatif, ce qui signifie positionnement relatif ; 3. absolu, ce qui signifie positionnement absolu 4. fixe, ce qui signifie positionnement fixe ;

Qu'est-ce que le positionnement CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

La propriété CSS Positioning vous permet de positionner des éléments. CSS fournit des propriétés de positionnement qui vous permettent de créer des dispositions en colonnes, de superposer une partie d'une disposition avec une autre et d'accomplir des tâches qui, pendant des années, nécessitaient souvent l'utilisation de plusieurs tableaux.

Plusieurs façons de positionnement CSS :

1. statique (positionnement statique) :

Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index). Référez-vous à l'essai précédent.

2. Relatif (positionnement relatif) :

L'élément positionné par rapport est hors du flux de documents normal, mais sa position dans le flux de documents existe toujours, mais il est visuellement différent de l'original. position.

Position par rapport à sa position normale (originale) via les paramètres haut, bas, gauche et droite. La notation hiérarchique peut être effectuée via z-index.

.static1{
            height:80px;
            background-color: red;
        }
        .relative{
            height:80px;
            position:relative;
            top:40px;
            left:40px;
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>
Copier après la connexion

3. Absolu (positionnement absolu) : Générez un élément en position absolue et positionnez-le 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". La classification hiérarchique peut être effectuée via z-index.

Un calque positionné comme absolu est séparé du flux normal de documents, mais la différence avec le relatif est que sa position dans le flux normal n'existe plus.

Certaines personnes donnent toujours des informations trompeuses sur cet attribut. On dit que lorsque l'attribut position est défini sur absolu, il est toujours positionné en fonction de la fenêtre du navigateur. C'est en fait faux. En fait, c’est une caractéristique des propriétés fixes.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            background-color: pink;
            position:relative;
            left:20px;    
        }
        .relative{
            height:80px;
            width:80px;
            position:absolute;
            top:10px;
            left:10px;
        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>
Copier après la connexion

4.fixed (positionnement fixe) : Générez des éléments positionnés de manière absolue et positionnez-les par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom". La classification hiérarchique peut être effectuée via z-index.

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            width:300px;
            background-color: pink;            
            left:100px;    
            top:100px;
        }
        .relative{
            height:80px;
            width:80px;
            position:fixed;
            left:20px;        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>
Copier après la connexion

[Apprentissage recommandé : 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!

É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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal