Comment changer la position du div avec CSS

Vous pouvez utiliser position en CSS pour positionner le div afin de changer la position du div. La signification de la valeur de l'attribut position :

statique : La boîte d'élément est générée normalement. Les éléments de niveau bloc créent une zone rectangulaire dans le cadre du flux de documents, tandis que les éléments en ligne créent une ou plusieurs zones de ligne placées dans leur élément parent.

relatif : La boîte à éléments est décalée d'une certaine distance. L'élément conserve sa forme non positionnée et l'espace qu'il occupait initialement.

absolu : La zone de l'élément est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur. Le bloc conteneur peut être un autre élément du document ou le bloc conteneur initial. L'espace précédemment occupé par l'élément dans le flux de documents normal est fermé, comme si l'élément n'existait pas. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.

corrigé : la zone de l'élément se comporte comme si la position était définie sur absolue, sauf que son bloc conteneur est la fenêtre elle-même.

Conseil : le positionnement relatif est en fait considéré comme faisant partie du modèle de positionnement du flux normal, puisque la position d'un élément est relative à sa position dans le flux normal.

Cas expérimental :

1. Ajustez la position d'un div en définissant la valeur de position d'un div. Comme suit :

body>
    <div id="div2"></div>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 200px;
            bottom: 200px;
        }
    </style>
</body>

2. Définissez un div avec une largeur et une hauteur de 200 pixels, 200 pixels du côté droit du corps et 200 pixels du bas.

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!