Question d'entretien Web front-end n°8 — Positionnement absolu et positionnement relatif

Positionnement relatif (relatif) :

Parlons d'abord du positionnement relatif : tout comme son nom, relatif, il doit y avoir un objet de référence, mais cette référence n'est rien d'autre, elle est sa propre position dans le flux de documents d'origine. L' objet après positionnement relatif n'est pas complètement séparé du flux du document. La position d'origine de cet objet dans le document est conservée (debout dans les toilettes sans chier), et l'objet décalé supprimera autre. Masquez le calque .

Les caractéristiques de positionnement relatif sont résumées comme suit :

①Pour les éléments positionnés relativement, si la largeur n'est pas définie, la largeur est la largeur de l'ensemble du navigateur, ou dépend de Basé sur la largeur de l'élément parent.

② Les éléments de bloc positionnés relativement se déplacent par rapport à leurs positions d'origine après leur déplacement, ils occupent toujours la position du flux de documents et n'affectent pas la disposition des autres éléments

Ce qui suit est vérifié par code

Placez 5 cases dans le navigateur, représentées par des couleurs différentes, le code est le suivant

Code HTML

Code CSS

Rendus initiaux

Définir le positionnement relatif de la troisième case

L'élément est décalé par rapport à sa position d'origine, et sa largeur et sa hauteur restent inchangées. Il agrandit le conteneur et occupe sa position d'origine dans le flux de documents, sans affecter la disposition de. d'autres éléments.

Positionnement absolu (absolu) :

L'objet positionné de manière absolue sera séparé du flux de documents. La position de référence du positionnement absolu n'est plus la sienne selon que son supérieur ou son supérieur a été positionné.

right, top, bottom, etc. les attributs sont absolus par rapport à son objet parent le plus proche qui a des paramètres de positionnement relatif ou absolu. , si l'objet parent ne définit pas l'attribut de positionnement, il sera positionné par rapport à l'élément racine HTML. Après avoir lu certains articles, j'ai découvert que certaines personnes pensent que si l'objet parent ne définit pas l'attribut de positionnement, il sera positionné. par rapport au corps. Cette affirmation est fausse. Les caractéristiques du positionnement absolu sont résumées comme suit :

① Lorsque la largeur d'un élément de bloc positionné de manière absolue n'est pas définie, la largeur est déterminée par le contenu à l'intérieur de l'élément

②La position d'origine après détachement équivaut à vide, et les éléments suivants occuperont la position

③L'objet en position absolue est défini par rapport au celui le plus proche de lui-même Positionner l'objet parent avec un positionnement relatif ou un positionnement absolu

④ Si l'élément parent n'est pas positionné, positionnez-le par rapport à l'élément racine html

Ce qui suit utilise toujours ces cinq Le décalage de chaque case est utilisé pour vérifier

(1) L'élément de bloc n'a pas de valeur de décalage

Les cinq cases ci-dessus donnent uniquement à box5 un positionnement absolu et aucune valeur de décalage. À ce stade, l'élément block flotte simplement dans sa position d'origine. S'il y a un élément block derrière lui, il occupera sa position dans le flux de documents. Ajoutons une case6 sous la case5 pour voir l'effet.

Remarque : Si la largeur d'un élément de bloc positionné de manière absolue n'est pas définie, la largeur est déterminée par le contenu à l'intérieur de l'élément.

Le rendu est le suivant

L'effet de l'ajout d'une boîte6

Comme on peut le voir sur la photo, box6 a déjà occupé la position de box5 dans le flux de documents.

(2) Il existe une valeur de décalage

Si la valeur de décalage est définie et que l'élément parent ne définit pas de positionnement relatif ou absolu, l'élément est positionné par rapport à l'élément racine (c'est-à-dire élément html, notez qu'il est relatif à l'élément racine, pas relatif au corps) Utilisez le décalage de box5 pour vérifier.

①Donnez un décalage à box5, l'élément parent n'a pas de positionnement relatif ou absolu

Le rendu est le suivant

②Donnez à box5 le même décalage et donnez à l'élément corps un positionnement absolu (réglage de l'élément corps pour positionnement absolu, la largeur d'un élément de bloc positionné de manière absolue est déterminée par le p le plus long, et la largeur est réduite) :

Les rendus sont les suivants

Photosenvoyées depuis l'application

Des deux rendus ci-dessus, il est évident qu'ils sont relativement Le positionnement par rapport à l'élément racine est différent du positionnement par rapport au corps. La principale différence réside dans le fait que la valeur de la marge du corps est incluse.

Ensuite, imbriquez trois autres boîtes parent à l'extérieur des cinq boîtes et donnez à ces trois boîtes parent une position pour vérifier si elles sont décalées en fonction de l'élément parent positionné le plus récemment.

Le code est le suivant

Code HTML

CSS code

Rendu

Image de l'application

Il ressort clairement de ce qui précède que box5 est positionné par rapport au conteneur de troisième couche, qui est le conteneur le plus proche de lui. Si vous êtes intéressé, vous pouvez essayer et supprimer le positionnement du conteneur de troisième couche pour voir s'il est positionné par rapport au conteneur de deuxième couche. Je l'ai vérifié et je ne publierai pas de photo.

Certains étudiants peuvent se demander pourquoi la boîte la plus extérieure doit être définie sur un positionnement absolu et les deux autres sur un positionnement relatif. La différence dans cette méthode de positionnement affecte principalement la largeur de la boîte et le positionnement relatif des éléments du bloc. la largeur n'est pas définie, sa largeur est la largeur par défaut du navigateur. S'il y a un élément parent, sa largeur est déterminée par l'élément parent. Si le contenu de cet élément de bloc est trop important, l'élément parent sera également grand. .

, c'est-à-dire que la largeur de l'élément de bloc positionné relativement dépend de l'élément parent. Alors, quel sera l'effet si ces trois conteneurs sont définis sur un positionnement absolu ? rendu

L'image provient de l'application

Comme le montre l'image, la largeur du conteneur de troisième couche ne dépend plus de l'élément parent, car il évolue par rapport au document. Détaché du flux, il est indépendant de lui-même, et sa largeur ne peut être déterminée que par le contenu. Pour résumer, la largeur d'un élément de bloc positionné de manière absolue est déterminée par son propre contenu. Lorsque la largeur d'un élément de bloc positionné de manière relative n'est pas définie, elle est par défaut la largeur du navigateur. Mais quelle que soit la largeur, l'élément positionné de manière absolue trouvera l'élément parent le plus proche de lui (positionnement absolu ou relatif) pour le positionnement.

Résumé :

relatif : le positionnement est relatif à sa propre position (lors du réglage du décalage, il sera relatif à son propre décalage de position ). L'élément défini sur relatif est toujours dans le flux de documents, la largeur et la hauteur de l'élément restent inchangées et la définition du décalage n'affectera pas la position des autres éléments. Le conteneur le plus à l'extérieur est défini sur un positionnement relatif. Si la largeur n'est pas définie, la largeur est la largeur de l'ensemble du navigateur.

absolu : le positionnement est déterminé par rapport à l'élément parent le plus proche de l'élément défini sur un positionnement absolu ou relatif. Si aucun élément parent n'est défini sur un positionnement absolu ou relatif, l'élément est positionné par rapport à l'élément racine. , qui est l'élément html. L'élément avec un ensemble absolu est hors du flux de documents. Si la largeur de l'élément n'est pas définie, la largeur est déterminée par le contenu à l'intérieur de l'élément. Après détachement, la position d'origine équivaut à être vide, et les éléments suivants occuperont la position.

Remarque : Les résultats expérimentaux de cet article sont obtenus lorsque l'élément parent et les éléments enfants ne sont pas définis sur une largeur fixe. Si l'élément parent est défini sur une largeur fixe, ses éléments enfants seront positionnés soit de manière absolue. ou relativement Aucun élément enfant ne peut dépasser la largeur de son élément parent. L'élément parent est le grand frère et personne ne peut le dépasser.

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!