css qu'est-ce que le positionnement relatif-tutoriel CSS-php.cn

css qu'est-ce que le positionnement relatif

WBOY

Libérer： 2024-02-23 11:39:04

original

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