Qu'est-ce que le positionnement CSS-Questions et réponses frontales-php.cn

Qu'est-ce que le positionnement CSS

藏色散人

Libérer： 2023-01-05 16:07:49

original

3301 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!