Différence entre style = "position: absolue" et style = "position: relative"

103

Quelqu'un peut-il me dire la différence entre style = "position:absolute"et style = "position:relative" et en quoi ils diffèrent si je l'ajoute à div/ span/ inputéléments?

J'utilise en absolutece moment, mais je veux relativeaussi explorer . Comment cela changera-t-il le positionnement?

css css-position Varun
la source
1
La propriété 'position' dans CSS 2.1.
Josh Lee
@rolfl Hm, cette modification était-elle vraiment nécessaire sur une question de 3 ans? J'aurais appelé cela "trop ​​mineur".
Mr Lister
3
@MrLister Il est venu dans une file d'attente de révision de «modification suggérée» .... Je n'ai pas remarqué l'âge. Mais si c'était une question vieille de 60 secondes, cela aurait-il fait une différence?
rolfl
@rolfl Pas vraiment; J'aurais quand même voté «trop mineur».
Mr Lister

Réponses:

178

Le positionnement absolu signifie que l'élément est complètement retiré du flux normal de la mise en page. En ce qui concerne le reste des éléments de la page, l'élément absolument positionné n'existe tout simplement pas. L'élément lui-même est ensuite dessiné séparément, sorte de "au-dessus" de tout le reste, à la position que vous spécifiez à l'aide des left, right, top and bottomattributs.

En utilisant la position que vous spécifiez avec ces attributs, l'élément est ensuite placé à cette position dans son dernier élément ancêtre qui a un attribut de position autre que static(les éléments de page par défaut sont statiques lorsqu'aucun attribut de position n'est spécifié), ou le corps du document (navigateur viewport) si aucun ancêtre de ce type n'existe.

Par exemple, si j'avais ce code:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... le <div>serait positionné à 20px du haut de la fenêtre du navigateur et à 20px du bord gauche de celui-ci.

Cependant, si j'ai fait quelque chose comme ça:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... alors le innerdiv serait positionné à 20px du haut du outerdiv et à 20px du bord gauche de celui-ci, car le outerdiv n'est pas positionné avec position:staticparce que nous l'avons explicitement défini pour l'utiliser position:relative.

Le positionnement relatif, par contre, revient à ne pas indiquer de positionnement du tout, mais les left, right, top and bottomattributs "poussent" l'élément hors de sa disposition normale. Le reste des éléments de la page est toujours disposé comme si l'élément était à son emplacement normal.

Par exemple, si j'avais ce code:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... alors les trois <span>éléments seraient assis côte à côte sans se chevaucher.

Si je configure le second <span>pour utiliser le positionnement relatif, comme ceci:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... alors Span2 chevaucherait le côté droit de Span1 de 5px. Span1 et Span3 se trouveraient exactement au même endroit que dans le premier exemple, laissant un espace de 5px entre le côté droit de Span2 et le côté gauche de Span3.

J'espère que cela clarifie un peu les choses.

AgentConundrum
la source
39

Positionnement relatif: l'élément crée ses propres axes de coordonnées, à un décalage d'emplacement par rapport à l'axe de coordonnées de la fenêtre. Il fait partie du flux de documents mais a changé.

Positionnement absolu: un élément recherche les axes de coordonnées disponibles les plus proches parmi ses éléments parents. L'élément est ensuite positionné en spécifiant des décalages par rapport à cet axe de coordonnées. Il est supprimé du flux normal du document.

entrez la description de l'image ici

La source

Premraj
la source
15

Vous voudrez certainement consulter cet article de positionnement de «A List Apart». Aide à démystifier le positionnement CSS (qui me semblait insensé, avant cet article).

jbrennan
la source
8

Avec le positionnement CSS, vous pouvez placer un élément exactement où vous le souhaitez sur votre page.

Lorsque vous allez utiliser le positionnement CSS, la première chose à faire est d'utiliser la position de la propriété CSS pour indiquer au navigateur si vous allez utiliser un positionnement absolu ou relatif.

Les deux positions ont des caractéristiques différentes. Dans CSS Une fois que vous avez défini la position, vous pouvez utiliser les attributs haut, droit, bas, gauche.

Position absolue

Un élément de position absolue est positionné par rapport au premier élément parent qui a une position autre que statique.

Position relative

Un élément positionné relatif est positionné par rapport à sa position normale.

Pour positionner un élément de manière relative, la position de la propriété est définie comme relative. La différence entre le positionnement absolu et relatif est la façon dont la position est calculée.

Plus: Postion relative vs absolue

GowriShankar
la source
6

OK, réponse très évidente ici ... fondamentalement, la position relative est relative à l'élément ou à la fenêtre précédente, tandis qu'absolu ne se soucie pas des autres éléments à moins qu'il ne s'agisse d'un parent si vous utilisez haut et gauche ...

Regardez l'exemple que je crée pour vous montrer les différences ...

entrez la description de l'image ici

Vous pouvez également le voir en action, en utilisant le css que je crée pour vous, vous pouvez voir comment les positions absolues et relatives se comportent:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}
<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>
Développer l'extrait

Alireza
la source
4

Le positionnement absolu est basé sur les coordonnées de l'affichage:

position:absolute;
top:0px;
left:0px;

^ place l'élément en haut à gauche de la fenêtre.


La position relative est relative à l'endroit où l'élément est placé:

position:relative;
top:1px;
left:1px;

^ place l'élément 1px vers le bas et 1px à partir de la gauche de l'endroit où il se trouvait à l'origine :)

Damien-Wright
la source
3

Relatif:

  1. Un élément avec position: relative;est positionné par rapport à sa position normale.

  2. Si vous n'ajoutez aucun attribut de positionnement (haut, gauche, bas ou droite) sur un élément relatif, cela n'aura aucun effet sur son positionnement. Il se comportera exactement comme un position: staticélément.

  3. Mais si vous ajoutez un autre attribut de positionnement, par exemple, top: 10px ;, il décalera sa position de 10 pixels vers le bas par rapport à son emplacement normal.

  4. Un élément avec ce type de positionnement est affecté par d'autres éléments et lui-même affecte également les autres.

Absolu:

  1. Un élément avec position: absolute;vous permet de placer n'importe quel élément exactement où vous le souhaitez. Vous utilisez les attributs de positionnement haut, gauche, bas. et droit de définir l'emplacement.

  2. Il est placé par rapport à l'ancêtre non statique le plus proche. S'il n'y a pas de tel conteneur, il est placé par rapport à la page elle-même.

  3. Il est supprimé du flux normal d'éléments sur la page.

  4. Un élément avec ce type de positionnement n'est pas affecté par d'autres éléments et n'affecte pas non plus le flux d'autres éléments.

Voir cet exemple explicite pour une meilleure clarté. https://codepen.io/nyctophiliac/pen/BJMqjX

Pranche Tiwari
la source
0

Absolute place l'objet (div, span, etc.) à un emplacement forcé absolu (généralement déterminé en pixels) et relatif le placera à une certaine distance de l'endroit où il se trouverait normalement. Par exemple:

position: relative; gauche: -20px;

Peut faire disparaître le côté gauche du texte s'il se trouve à moins de 20 pixels du bord gauche de l'écran.

Charles Zink
la source
0

position: absolute peut être placé n'importe où et y rester tel que 0,0.

position: relative est placé avec un décalage par rapport à l'emplacement d'origine dans le navigateur.

Vil Ignoble
la source
0

position: acte relatif comme élément parent position: acte absolu un enfant de position relative. vous pouvez voir l'exemple ci-dessous

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }
Imran Khan
la source