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

css qu'est-ce que le positionnement relatif

WBOY
Libérer: 2024-02-23 11:39:04
original
1054 Les gens l'ont consulté

css quest-ce que le positionnement relatif

Le positionnement relatif CSS signifie qu'un élément est positionné par rapport à sa position d'origine et que la position déplacée n'affectera pas la disposition des autres éléments.

La caractéristique du positionnement relatif est que l'élément occupe toujours l'espace d'origine sans se détacher du flux du document ni affecter la disposition des autres éléments. Son positionnement est calculé par rapport à l'élément lui-même et la position de l'élément peut être spécifiée via les attributs top, right, bottom et left.

Voici un exemple de code spécifique :

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: lightgrey;
    }
    
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: red;
        top: 50px;
        left: 50px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="box"></div>
</div>

</body>
</html>
Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé un conteneur d'une largeur de 300px et d'une hauteur de 300px, avec une couleur de fond gris clair. Ensuite, une boîte d'une largeur de 100 px et d'une hauteur de 100 px est créée à l'intérieur du conteneur, avec une couleur de fond rouge. En ajoutant l'attribut position: relative à la boîte, nous définissons la boîte sur un positionnement relatif.

Ensuite, nous déplaçons la boîte de 50px vers le bas et vers la droite en utilisant les propriétés top: 50px et left: 50px. Cela déplace la boîte vers le bas et vers la droite par rapport à sa position d'origine.

Il convient de noter que le mouvement de positionnement relatif est relatif à l'élément lui-même, donc même si la boîte a bougé, elle occupe toujours la position d'origine. Les autres éléments ne seront pas affectés et aucune modification de mise en page ne se produira.

Pour résumer, le positionnement relatif est une manière de se positionner par rapport à sa position d'origine. La position déplacée n'affectera pas la disposition des autres éléments. La position de l'élément peut être contrôlée via les attributs haut, droite, bas et gauche.

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!

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