Exemples de positionnement CSS expliqués

Cet article vous présente principalement le tutoriel de positionnement CSS. L'éditeur le trouve plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Flux de documents

En termes simples, il s'agit du processus par lequel les éléments sont organisés selon leur ordre de position en HTML. Le mécanisme de mise en page HTML utilise le modèle de flux de documents, c'est-à-dire que les éléments de bloc occupent une ligne et les éléments en ligne n'occupent pas une seule ligne.

Généralement, la marge est utilisée pour séparer la distance entre les éléments ; le remplissage est utilisé pour séparer la distance entre les éléments et le contenu. La marge est utilisée pour la disposition afin de séparer les éléments afin que les éléments soient indépendants les uns des autres ; le remplissage est utilisé pour l'espace entre les éléments et le contenu afin de permettre une « distance » entre le contenu (texte) et les éléments (encapsulés). Tant qu'il n'est pas disposé en flottant ou en positionnement absolu, il sera dans le flux documentaire.

2. Introduction de l'attribut de position

1. statique, valeur par défaut. Un élément dont la position est définie sur statique sera toujours à la position donnée par le flux documentaire.

2. inherit spécifie que la valeur de l'attribut position doit être héritée de l'élément parent. Cependant, aucune version d'Internet Explorer (y compris IE8) ne prend en charge la valeur d'attribut « inherit ».

3. fixe, génère des éléments absolument positionnés. Par défaut, vous pouvez vous positionner aux coordonnées spécifiées par rapport à la fenêtre du navigateur. La position de l'élément

4. est spécifiée via les attributs "left", "top", "right" et "bottom". L'élément restera dans cette position, que la fenêtre défile ou non. Mais lorsque l'élément ancêtre a un attribut transform et n'en vaut pas aucun, les coordonnées sont spécifiées par rapport à l'élément ancêtre, et non à la fenêtre du navigateur.

5. absolu, génère un élément positionné de manière absolue, positionné par rapport à l'élément ancêtre positionné le plus proche de l'élément.

6. La position de cet élément peut être précisée par les attributs "left", "top", "right" et "bottom".

7. relatif, génère un élément relativement positionné, positionné par rapport à la position initiale de l'élément dans le document.

8. Définissez le décalage de cet élément par rapport à sa propre position via les attributs "left", "top", "right" et "bottom".

3. Positionnement relatif

relatif génère un élément relativement positionné, positionné par rapport à sa position normale.

Le processus de positionnement relatif est le suivant :

Générer un élément par défaut (statique) (et l'élément flotte comme un calque). Par rapport au mouvement de position précédent, la direction et l'amplitude du mouvement sont déterminées par les attributs gauche, droite, haut et bas. La position avant le décalage reste inchangée.

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

Avant que le code de commentaire dans la case 2 ne prenne effet, il est trié et présenté selon le flux documentaire.

Cependant, lorsque le code du commentaire est décommenté et prend effet, il se déplace par rapport à la position où il doit être présenté dans le flux de documents.

Ainsi, l'objet de référence du positionnement relatif est lui-même.

4. Positionnement absolu

Une grande différence entre le positionnement absolu et le positionnement relatif est que lorsque nous définissons un élément sur un positionnement absolu, l'élément sortira du document. flux, d’autres éléments supposeront que l’élément n’existe pas dans le flux de documents et occuperont sa position d’origine. Un élément en position absolue déplace sa position en fonction de sa référence, qui est déterminée par les paramètres de positionnement de son élément ancêtre.

La soi-disant détermination basée sur les paramètres de positionnement de ses éléments ancêtres est simplement comprise comme : Par rapport à l'élément ancêtre positionné le plus proche de l'élément, s'il n'y a pas d'élément ancêtre avec un ensemble de positionnement, alors l'objet de référence est le calque corps.

1. Utiliser absolu lorsque l'élément ancêtre n'est pas positionné. Dans ce cas, l’objet de référence est le corps.

2. Les éléments ancêtres ont un positionnement. Tant que l'élément ancêtre est défini sur une valeur autre que position:static, il est considéré comme positionné et l'élément ancêtre le plus proche sera défini. au positionnement absolu. Une référence à l’élément. Dans ce cas, la référence est l’élément ancêtre le plus proche.

3. Lorsque gauche/droite et haut/bas ne sont pas définis, la position de l'élément absolu est la position de l'élément dans le flux de documents

Recommandations associées :

Quelques recherches sur la Positoine, l'absolu et le relatif dans le positionnement CSS

Analyse de la position de positionnement CSS et exemples de scénarios d'application

10 cours recommandés sur le positionnement 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!