Différence entre style = "position: absolute" et style = "position: relative"
Quelqu'un peut-il me dire la différence entre style = "position:absolute" et style = "position:relative" et comment ils diffèrent dans le cas où je l'ajoute à div/span/input éléments?
J'utilise absolute maintenant, mais je veux aussi explorer relative. Comment cela va-t-il changer le positionnement?
Le positionnement absolu signifie que l'élément est complètement sorti 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, en quelque sorte "au-dessus" de tout le reste, à la position que vous spécifiez à l'aide des attributs left, right, top and bottom.
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 possède un attribut de position autre que static (les éléments de page sont définis par défaut sur statique si aucun attribut de position n'est spécifié), ou le corps du document (fenêtre du navigateur) si aucun tel ancêtre n'existe.
Par exemple, si j'avais ce code:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
... le <div> serait positionné à 20 pixels du haut de la fenêtre du navigateur et à 20 pixels du bord gauche de celui-ci.
Cependant, si je faisais quelque chose comme ça:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
... alors la inner div serait positionnée à 20px du haut de la outer div et à 20px du bord gauche de la même, car la outer div n'est pas positionnée avec position:static parce que nous l'avons explicitement configuré pour utiliser position:relative.
Le positionnement relatif, par contre, revient à ne déclarer aucun positionnement, mais les attributs left, right, top and bottom "Nudge" l'élément en dehors de sa présentation normale. Le reste des éléments de la page reste toutefois agencé 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 l'un à côté de l'autre sans se chevaucher.
Si je règle 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 par 5px. Span1 et Span3 seraient assis exactement au même endroit que dans le premier exemple, laissant un écart de 5 pixels entre le côté droit de Span2 et le côté gauche de Span3.
J'espère que cela clarifie un peu les choses.
Positionnement relatif: L'élément crée ses propres axes de coordonnées, à un emplacement décalé de l'axe de coordonnées de la fenêtre. Cela fait partie du flux de documents mais est décalé.
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 à partir de cet axe de coordonnées. Il a supprimé du flux de document normal.
Vous aurez certainement envie de vérifier cet article de positionnement de A List Apart. A aidé à démystifier le positionnement CSS (ce qui me paraissait insensé avant cet article).
Avec le positionnement CSS, vous pouvez placer un élément exactement à l'endroit souhaité sur votre page.
Lorsque vous utilisez 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 le positionnement absolu ou relatif.
Les deux postes ont des caractéristiques différentes.En Css Une fois que vous avez défini Position, vous pouvez utiliser les attributs haut, droit, bas et 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é par rapport est positionné par rapport à sa position normale.
Pour positionner un élément relativement, la position de la propriété est définie comme relative. La différence entre le positionnement absolu et relatif correspond au mode de calcul de la position.
OK, réponse très évidente ici ... fondamentalement la position relative est relative à l'élément précédent ou à la fenêtre, alors que est absolue ne vous souciez pas des autres éléments sauf si c'est un parent si vous utilisez top et left ...
Regardez l'exemple que je crée pour vous afin de montrer les différences ...
Aussi, vous pouvez 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>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 depuis la gauche de l'endroit où il était assis à l'origine :)
Relatif:
Un élément avec
position: relative;est positionné par rapport à sa position normale.Si vous n’ajoutez aucun attribut de positionnement (haut, gauche, bas ou droite) sur un élément relatif, cela n’a aucun effet sur son positionnement. Il se comportera exactement comme un élément
position: static.Mais si vous ajoutez un autre attribut de positionnement, par exemple top: 10px ;, sa position sera décalée de 10 pixels par rapport à sa position normale.
Un élément avec ce type de positionnement est affecté par d'autres éléments et affecte également les autres.
Absolue:
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 top, left, bottom. et à droite pour définir l'emplacement.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.
Il est supprimé du flux normal d'éléments sur la page.
Un élément avec ce type de positionnement n'est pas affecté par d'autres éléments et n'affecte pas non plus la circulation des autres éléments.
Voir cet exemple explicite pour plus de clarté. https://codepen.io/nyctophiliac/pen/BJMqjX
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 où il a été placé à l'origine dans le navigateur.
Absolute place l'objet (div, span, etc.) à un emplacement forcé absolu (généralement déterminé en pixels) et relative 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 trouvait à moins de 20 pixels du bord gauche de l’écran.