Maison > Article > interface Web > La différence et la connexion entre les éléments positionnés de manière absolue et les éléments positionnés relativement

La différence et la connexion entre les éléments positionnés de manière absolue et les éléments positionnés relativement

WBOYoriginal: 2024-01-23 10:12:06823parcourir

La différence et la connexion entre les éléments positionnés absolument et les éléments positionnés relativement nécessitent des exemples de code spécifiques

En HTML et CSS, nous utilisons souvent le positionnement absolu et le positionnement relatif pour contrôler la position et la disposition des éléments. Le positionnement absolu et le positionnement relatif sont deux méthodes de positionnement courantes, et elles ont des caractéristiques et des utilisations différentes dans les applications pratiques. Cet article présentera en détail les différences et les connexions entre les éléments positionnés de manière absolue et les éléments positionnés de manière relative, et donnera quelques exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer ces deux méthodes de positionnement.

1. Caractéristiques et utilisations des éléments positionnés de manière absolue

Les éléments en position absolue seront séparés du flux de documents et n'occuperont pas d'espace : Les éléments en position absolue n'affecteront pas les autres éléments. Ils seront séparés du flux de documents ordinaire et le seront. n'affecte pas les autres éléments. L'emplacement ne fait aucune différence. Par conséquent, les éléments positionnés de manière absolue peuvent être librement positionnés n'importe où sur la page sans être limités par d'autres éléments.
Utilisez les attributs haut, gauche, droite et bas pour contrôler la position : les éléments positionnés de manière absolue peuvent déterminer leur position spécifique sur la page en définissant les valeurs des attributs haut, gauche, droite et bas. Ces valeurs de propriété peuvent être des valeurs de pixels, des pourcentages ou même des valeurs négatives.
Positionner uniquement dans la portée de son élément positionné non statiquement le plus proche : le positionnement final d'un élément positionné de manière absolue est relatif à son élément ancêtre positionné non statiquement (positionné par défaut) le plus proche. Si aucun élément correspondant positionné de manière non statique n'est trouvé, l'élément positionné de manière absolue sera positionné en fonction du document.
Les éléments positionnés de manière absolue peuvent recouvrir d'autres éléments : étant donné que les éléments positionnés de manière absolue se détacheront du flux de documents, ils peuvent être superposés sur des éléments ordinaires pour obtenir un effet de couverture.

Un scénario d'application typique d'éléments positionnés de manière absolue consiste à créer des menus flottants, des boîtes contextuelles ou des effets décoratifs spéciaux.

Ce qui suit est un exemple de code pour un élément en position absolue :

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div><!-- 绝对定位元素 -->
    <p>这是一个普通的段落</p>
</body>
</html>

Dans l'exemple ci-dessus, box est un élément en position absolue en définissant les attributs top et left, il est positionné à 100px du haut de la page et à 200px du haut de la page. le côté gauche de la page.

2. Caractéristiques et utilisations des éléments positionnés relativement

Les éléments positionnés relativement occupent toujours de l'espace : les éléments positionnés relativement occupent toujours de l'espace sur la page et ne se détacheront pas du flux documentaire. Les autres éléments seront disposés en fonction de la position d'origine de l'élément positionné relativement. Même si l'élément positionné relativement se déplace, la disposition ne sera pas affectée.
Utilisez les attributs haut, gauche, droite et bas pour un réglage fin : les éléments positionnés relativement peuvent également être ajustés en définissant les valeurs des attributs haut, gauche, droite et bas. Ces valeurs de propriétés sont calculées par rapport à la position d'origine de l'élément dans le document.
S'applique à lui-même et aux éléments enfants : les propriétés de positionnement relatif s'appliquent à la fois à lui-même et à ses éléments enfants contenus. Les éléments enfants peuvent être positionnés par référence à la position d'un élément positionné relativement.

Les éléments positionnés relativement sont généralement utilisés pour affiner la position des éléments afin d'obtenir une disposition plus flexible dans des scénarios spécifiques.

Ce qui suit est un exemple de code pour un élément relativement positionné :

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"><!-- 相对定位元素 -->
        <p>这是一个相对定位元素内的段落</p>
    </div>
</body>
</html>

Dans l'exemple ci-dessus, box est un élément relativement positionné en définissant les attributs haut et gauche, il a été déplacé de 20 px vers le bas et vers la droite en fonction de son emplacement. position d'origine. Les éléments de paragraphe sont également positionnés par rapport à la boîte.

3. La connexion entre les éléments de positionnement absolu et les éléments de positionnement relatif

Le positionnement relatif est la base du positionnement absolu : Le positionnement relatif est une forme particulière de positionnement absolu. Avant de définir le positionnement absolu d'un élément, nous le définissons généralement d'abord sur un positionnement relatif, puis utilisons des attributs tels que top et left pour un positionnement spécifique.
Des éléments positionnés absolument et des éléments positionnés relativement peuvent exister en même temps : Des éléments positionnés absolument et des éléments positionnés relativement peuvent exister en même temps sur la même page. La disposition entre eux n’interfère pas et peut être librement positionnée sur la page.
L'attribut z-index peut être utilisé pour contrôler l'ordre d'empilement des éléments : en définissant la valeur de l'attribut z-index, vous pouvez contrôler l'ordre d'empilement des éléments absolument positionnés et des éléments relativement positionnés, obtenant ainsi l'effet d'occlusion de différents éléments.

Ce qui suit est un exemple de code pour un élément en position absolue et un élément en position relative coexistant :

<!DOCTYPE html>
<html>
<head>
    <style>
        #box1 {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        #box2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1"><!-- 相对定位元素 -->
        <div id="box2"></div><!-- 绝对定位元素 -->
    </div>
</body>
</html>

Dans l'exemple ci-dessus, box1 est un élément en position relative, qui est déplacé vers le bas de 20 px et vers la droite en définissant le haut et Attributs de gauche déplacés de 50 px. box2 est un élément positionné de manière absolue en définissant les attributs top et right, il est positionné dans le coin supérieur droit de box1.

Grâce à des exemples de code réels, nous pouvons comprendre plus clairement les différences et les connexions entre les éléments positionnés de manière absolue et les éléments positionnés de manière relative. En maîtrisant les caractéristiques et les utilisations de ces deux méthodes de positionnement, nous pouvons mettre en page et concevoir des pages Web de manière plus flexible pour obtenir de meilleurs effets visuels.

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!

css html

Déclaration：

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

Article précédent：Causes courantes et méthodes de prévention pour éviter les échecs de positionnement absolusArticle suivant：Causes courantes et méthodes de prévention pour éviter les échecs de positionnement absolus

Articles Liés

Voir plus