Maison interface Web tutoriel CSS Les similitudes, les différences et les liens entre le positionnement absolu et le positionnement relatif

Les similitudes, les différences et les liens entre le positionnement absolu et le positionnement relatif

Jan 23, 2024 am 09:29 AM
positionnement absolu positionnement relatif Différences et connexions

Les similitudes, les différences et les liens entre le positionnement absolu et le positionnement relatif

La différence et le lien entre le positionnement absolu et le positionnement relatif

Dans la conception et le développement de sites Web, le positionnement est l'un des concepts très importants. Parmi eux, le positionnement absolu et le positionnement relatif sont deux méthodes de positionnement couramment utilisées. Cet article explorera les différences et les liens entre le positionnement absolu et le positionnement relatif, et les illustrera avec des exemples de code spécifiques.

1. La différence entre le positionnement absolu et le positionnement relatif

  1. Les définitions sont différentes :
    Le positionnement absolu signifie que le positionnement d'un élément n'a rien à voir avec le positionnement du document, mais est positionné par rapport à l'élément parent.
    Le positionnement relatif fait référence au positionnement d'un élément par rapport au document ou à l'élément parent.
  2. Avoir des effets différents sur les autres éléments :
    Les éléments positionnés de manière absolue sont hors du flux de documents et n'auront aucun impact sur les autres éléments. La disposition des autres éléments ne sera pas affectée par les éléments positionnés de manière absolue.
    Les éléments positionnés relativement sont toujours dans le flux de documents et la disposition des autres éléments sera toujours affectée par les éléments positionnés relativement.
  3. Différentes méthodes de positionnement :
    Le positionnement absolu nécessite un positionnement en définissant les attributs de positionnement de l'élément (haut, droite, bas, gauche).
    Le positionnement relatif est effectué en définissant le décalage de l'élément (haut, droite, bas, gauche).
  4. Différentes références de positionnement :
    Le positionnement absolu est positionné par rapport à l'élément parent. S'il n'y a pas d'élément parent, il est positionné par rapport à l'ensemble du document.
    Le positionnement relatif est un positionnement par rapport à la position d'origine de l'élément lui-même dans le document.

2. La connexion entre le positionnement absolu et le positionnement relatif

  1. Vous pouvez également ajuster la position en utilisant les attributs de positionnement (haut, droite, bas, gauche).
    Le positionnement absolu peut modifier la position d'un élément dans l'élément parent en ajustant la valeur de l'attribut de positionnement.
    Le positionnement relatif peut modifier le décalage d'un élément par rapport à sa position d'origine en ajustant la valeur de l'attribut de positionnement.
  2. Vous pouvez également définir l'ordre d'empilement des éléments en utilisant l'attribut z-index.
    Les éléments positionnés de manière absolue et relative peuvent contrôler l'ordre d'affichage des éléments en définissant l'attribut z-index pour obtenir un effet en cascade.
  3. Il peut également être utilisé en combinaison avec d'autres méthodes de positionnement.
    Le positionnement absolu et le positionnement relatif peuvent être utilisés en combinaison avec d'autres méthodes de positionnement (telles que le positionnement fixe et le positionnement flottant) pour disposer les éléments de manière flexible.

Ce qui suit utilise des exemples de code spécifiques pour illustrer l'utilisation du positionnement absolu et du positionnement relatif :

Exemple de code de positionnement absolu :

<div style="position: relative;">
  <div style="position: absolute; top: 50px; left: 50px; background-color: red;">
    绝对定位元素
  </div>
</div>
Copier après la connexion

Dans le code ci-dessus, en définissant l'attribut de positionnement de l'élément parent sur le positionnement relatif, puis définissez l'attribut de positionnement de l'élément enfant sur un positionnement absolu, et ajustez la position de l'élément enfant dans l'élément parent en définissant les attributs haut et gauche.

Exemple de code de positionnement relatif :

<div style="position: relative; top: 50px; left: 50px; background-color: blue;">
  相对定位元素
</div>
Copier après la connexion

Dans le code ci-dessus, l'attribut de positionnement de l'élément est directement défini sur le positionnement relatif, et le décalage de l'élément par rapport à la position d'origine est ajusté en définissant les attributs haut et gauche .

Le positionnement absolu et le positionnement relatif sont des méthodes de positionnement très couramment utilisées dans la conception et le développement de sites Web. Maîtriser leurs différences et leurs connexions ainsi que leur utilisation correcte permet de mieux réaliser la mise en page et l'effet des pages Web. J'espère que cet article pourra aider les lecteurs à mieux comprendre et appliquer le positionnement absolu et le positionnement relatif.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le positionnement collant s'éloigne-t-il du flux de documents ? Le positionnement collant s'éloigne-t-il du flux de documents ? Feb 20, 2024 pm 05:24 PM

Le positionnement collant s'éloigne-t-il du flux de documents ? Des exemples de code spécifiques sont nécessaires dans le développement Web, la mise en page est un sujet très important. Parmi elles, le positionnement est l’une des techniques de mise en page les plus couramment utilisées. En CSS, il existe trois méthodes de positionnement courantes : le positionnement statique, le positionnement relatif et le positionnement absolu. En plus de ces trois méthodes de positionnement, il existe également une méthode de positionnement plus particulière, à savoir le positionnement collant. Alors, le positionnement collant s'éloigne-t-il du flux de documents ? Discutons-en en détail ci-dessous et fournissons quelques exemples de code pour vous aider à comprendre. Tout d’abord, nous devons comprendre ce qu’est le flux de documents

Une plongée approfondie dans les différences et les connexions entre SpringCloud et SpringBoot Une plongée approfondie dans les différences et les connexions entre SpringCloud et SpringBoot Jan 24, 2024 am 10:29 AM

Une analyse approfondie des différences et des connexions entre Spring Cloud et Spring Boot nécessite un titre d'exemple de code spécifique : Analyse approfondie des différences et des connexions entre Spring Cloud et Spring Boot Introduction : À l'ère actuelle de l'architecture des microservices, Spring Cloud et Spring Boot sont devenus les frameworks préférés choisis par de nombreuses entreprises et développeurs. Cependant, pour les débutants, les différences et les connexions entre Spring Cloud et Spring Boot peuvent être relativement floues.

Comment positionner les éléments en CSS Comment positionner les éléments en CSS Apr 26, 2024 am 10:24 AM

Il existe quatre méthodes de positionnement des éléments CSS : le positionnement statique, relatif, absolu et fixe. Le positionnement statique est la valeur par défaut et l'élément n'est pas affecté par les règles de positionnement. Le positionnement relatif déplace un élément par rapport à lui-même sans affecter le flux du document. Le positionnement absolu supprime un élément du flux de documents et le positionne par rapport à ses éléments ancêtres. Le positionnement fixe positionne un élément par rapport à la fenêtre, en le gardant toujours dans la même position sur l'écran.

Explication détaillée du codage de position de rotation RoPE couramment utilisé dans les grands modèles de langage : pourquoi est-il meilleur que le codage de position absolue ou relative ? Explication détaillée du codage de position de rotation RoPE couramment utilisé dans les grands modèles de langage : pourquoi est-il meilleur que le codage de position absolue ou relative ? Apr 01, 2024 pm 08:19 PM

L'architecture Transformer est la pierre angulaire du domaine du traitement du langage naturel (NLP) depuis l'article « AttentionIsAllYouNeed » publié en 2017. Sa conception est restée pratiquement inchangée depuis des années, 2022 marquant un développement majeur dans le domaine avec l'introduction du Rotary Position Encoding (RoPE). L'intégration de position avec rotation est la technique d'intégration de position PNL de pointe. Les modèles linguistiques à grande échelle les plus populaires (tels que Llama, Llama2, PaLM et CodeGen) l'utilisent déjà. Dans cet article, nous examinerons en profondeur ce que sont les codages de position de rotation et comment ils combinent parfaitement les avantages des intégrations de position absolue et relative. La nécessité d'un codage positionnel pour comprendre Ro

Comment mettre l'image au milieu avec CSS Comment mettre l'image au milieu avec CSS Apr 25, 2024 am 11:51 AM

Il existe trois manières principales de centrer une image en CSS : en utilisant display: block et margin: 0 auto;. Utilisez la disposition flexbox ou la disposition en grille et définissez les éléments d'alignement ou la justification du contenu au centre. Utilisez le positionnement absolu, définissez le haut et la gauche sur 50 % et appliquez la transformation : translate(-50%, -50%);.

syntaxe de l'attribut inférieur en CSS syntaxe de l'attribut inférieur en CSS Feb 21, 2024 pm 03:30 PM

Syntaxe de l'attribut bottom et exemples de code en CSS En CSS, l'attribut bottom est utilisé pour spécifier la distance entre un élément et le bas du conteneur. Il contrôle la position d'un élément par rapport au bas de son élément parent. La syntaxe de l'attribut bottom est la suivante : element{bottom:value;} où element représente l'élément auquel le style doit être appliqué et value représente la valeur inférieure à définir. la valeur peut être une valeur de longueur spécifique, telle que des pixels

Qu'est-ce que la mise en page ? Qu'est-ce que la mise en page ? Feb 24, 2024 pm 03:03 PM

La mise en page fait référence à une méthode de composition adoptée dans la conception Web pour organiser et afficher les éléments d'une page Web selon certaines règles et structures. Grâce à une mise en page raisonnable, la page Web peut être rendue plus belle et plus soignée, et offrir une bonne expérience utilisateur. Dans le développement front-end, il existe de nombreuses méthodes de mise en page parmi lesquelles choisir, telles que la mise en page traditionnelle des tableaux, la mise en page flottante, la mise en page de positionnement, etc. Cependant, avec la promotion de HTML5 et CSS3, les technologies de mise en page réactives modernes, telles que la mise en page Flexbox et la mise en page Grid, sont devenues

Comment centrer la boîte en HTML5 Comment centrer la boîte en HTML5 Apr 05, 2024 pm 12:27 PM

Pour centrer la boîte en HTML5, il existe les méthodes suivantes : centrage horizontal : text-align : centermargin : autodisplay : flex ; ); position : absolue ; haut : 50 % ; gauche : 50 % ; transformer (-50 %, -50 %);

See all articles