Quelqu'un peut-il me dire quelle est la différence entre style = "position:absolute" y style = "position:relative" et comment ils diffèrent au cas où je l'ajouterais à div / span / input éléments ?
J'utilise absolute pour le moment, mais je veux explorer relative également. Comment cela va-t-il changer le positionnement ?
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 positionné de manière absolue n'existe tout simplement pas. L'élément lui-même est alors dessiné séparément, en quelque sorte "au-dessus" de tout le reste, à la position que vous avez spécifiée à l'aide de la balise left, right, top and bottom attributs.
En utilisant la position que vous spécifiez avec ces attributs, l'élément est alors placé à cette position dans son dernier élément ancêtre qui a un attribut de position autre que static (les éléments de page ont une valeur statique par défaut lorsqu'aucun attribut de position n'est spécifié), ou le corps du document (fenêtre du navigateur) 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> sera positionné à 20px du haut de la fenêtre du navigateur et à 20px du bord gauche de celle-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>...puis le inner serait positionné à 20px du haut de l'élément outer et à 20px du bord gauche de ce même div, car l'élément outer n'est pas positionné avec position:static parce que nous l'avons explicitement configuré pour qu'il utilise position:relative .
Le positionnement relatif, quant à lui, revient à ne pas indiquer de positionnement du tout, mais le left, right, top and bottom font sortir l'élément de sa disposition normale. Le reste des éléments de la page sont toujours disposés comme si l'élément était à sa place normale.
Par exemple, si j'avais ce code :
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...puis les trois <span> Les éléments seraient assis les uns à côté des autres sans se chevaucher.
Si je mets le deuxième <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.
Vous voudrez certainement vérifier cet article de positionnement de "A List Apart". A aidé à démystifier le positionnement CSS (qui me semblait insensé, avant cet article).
Grâce au positionnement CSS, vous pouvez placer un élément exactement là où vous le souhaitez sur votre page.
Lorsque vous allez utiliser le positionnement CSS, la première chose à faire est d'utiliser la propriété CSS position pour indiquer au navigateur si vous allez utiliser un positionnement absolu ou relatif.
Les deux positions ont des caractéristiques différentes. En CSS, une fois que vous avez défini la position, vous pouvez utiliser les attributs haut, droit, bas et gauche.
Position absolue
Un élément à position absolue est positionné par rapport au premier élément parent qui a une position absolue. élément parent qui a une position autre que statique.
Position relative
Un élément à position relative est positionné par rapport à sa position normale. normale.
Pour positionner un élément de manière relative, la propriété position est définie comme relative. La différence entre le positionnement absolu et le positionnement relatif réside dans la manière dont la position est calculée.
Plus : Position relative ou absolue
Le positionnement absolu est basé sur les coordiantes 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 à gauche de l'endroit où il se trouvait à l'origine :)
Absolute place l'objet (div, span, etc.) à un emplacement forcé absolu (généralement déterminé en pixels) et relative le place à une certaine distance de l'endroit où il se trouverait normalement. Par exemple :
position:relative ; left:-20px ;
Le côté gauche du texte pourrait disparaître s'il se trouvait à moins de 20px du bord gauche de l'écran.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
La propriété "position". dans CSS 2.1.
0 votes
@rolfl Hm, cette modification était-elle vraiment nécessaire pour une question vieille de 3 ans ? Je l'aurais appelé "trop mineur".
3 votes
@MrLister C'est apparu dans une revue 'suggested edit' queue.... Je n'ai pas remarqué l'âge. Mais si la question avait été posée il y a 60 secondes, cela aurait-il fait une différence ?
0 votes
@rolfl Pas vraiment ; j'aurais quand même voté "trop mineur".