Position relative vs position absolue?

Question

Quelle est la différence entre position relative et position absolue et quand utiliser lequel dans css?

Answer 1

Absolue de Positionnement CSS

position: absolute;

Le positionnement absolu est le plus facile à comprendre. Vous commencez avec le CSS de la propriété position:

position: absolute;

Cela indique au navigateur que tout va être placés devraient être retirés du flux normal du document et sera placé dans un endroit précis de la page. Il n'affecte pas la façon dont les éléments avant ou après dans le code HTML sont positionnés sur la page Web cependant, il va être soumis à ses parents le positionnement, sauf si vous la remplacez.

Si vous souhaitez placer un élément de 10 pixels à partir du haut de la fenêtre de document, vous pouvez utiliser le "top" offset de position avec le positionnement absolu:

position: absolute;
top: 10px;

Cet élément sera alors toujours afficher 10px à partir du haut de la page, indépendamment de ce que le contenu passe à travers,sous ou au-dessus de l'élément (visuellement).

Les quatre propriétés de positionnement sont:

1. top
2. droit
3. bas
4. de gauche

Pour les utiliser, vous devez penser à eux comme à compenser les propriétés. En d'autres termes, un élément positionné à droite 2px n'est pas déplacé de droite 2px. C'est côté droit est décalé sur le côté droit de la fenêtre de 2px. Le même est vrai pour les trois autres.

Le Positionnement Relatif

position: relative;

Le positionnement relatif utilise les mêmes quatre positionnement propriétés de positionnement absolu. Mais au lieu de fonder la position de l'élément sur la vue navigateur de port, il commence à partir de l'emplacement de l'élément serait si elle était encore dans le flux normal.

Par exemple, si vous avez trois paragraphes sur votre page Web, et la troisième a un position: relative style, c'est la position de la compensation sera basée sur son emplacement actuel, pas à partir de l'original côtés de la vue sur le port.

Paragraphe 1.

Paragraphe 2.

Paragraphe 3.

Dans l'exemple ci-dessus, le troisième paragraphe sera positionné 3em sur le côté gauche de l'élément conteneur, mais sera toujours en dessous des deux premiers paragraphes. Elle reste dans le flux normal du document, et juste être légèrement décalées. Si vous avez changé de position: absolute; tout ce qui suit ce serait l'affichage sur le dessus de cela, car il ne serait plus dans le flux normal du document.

Notes:

• la largeur par défaut d'un élément en position absolue est la largeur du contenu à la différence d'un élément qui est relativement placé à l'endroit où c'est la largeur par défaut est de 100% de l'espace qu'il peut remplir.

• Vous pouvez avoir des éléments qui se chevauchent avec des éléments en position absolue alors que vous ne pouvez pas faire cela avec les éléments en position relative (en natif je.e sans l'utilisation de marges négatives/positionnement)

---

beaucoup tiré de: cette ressource

Answer 2

Les deux "relative" et "absolue" de positionnement sont vraiment relative, juste avec un cadre différent. "Absolu" et un positionnement par rapport à la position de l'autre, l'élément englobant. "Relative" et un positionnement par rapport à la position que l'élément lui-même aurait sans positionnement.

Cela dépend de vos objectifs et des besoins de celui que vous utilisez. "Relative" de la position est idéale lorsque vous souhaitez déplacer un élément à partir de la position qu'elle aurait autrement dans le flux d'éléments, par exemple pour lancer certains caractères apparaissent en exposant la position. "Absolu" de positionnement est adapté pour placer un élément dans un système de coordonnées défini par un autre élément, par exemple pour "surimpression" une image avec du texte.

Comme un de spécial, utilisez "relative" positionnement sans déplacement (juste paramètre position: relative) pour en faire un élément d'un cadre de référence, de sorte que vous pouvez utiliser "absolue" de positionnement pour les éléments qui sont à l'intérieur (dans le balisage).

Answer 3

Une autre chose à noter est que si vous voulez un absolu de l'élément à être confiné à un élément parent, alors vous devez définir le parent de l'élément en position relative. Qui va garder l'enfant de l'élément contenu dans l'élément parent, et il ne sera pas "relative" à l'ensemble de la fenêtre.

J'ai écrit un post de blog qui donne un simple exemple qui crée les suivantes:

Qui a un vert div qui est absolument positionné au fond de la mère jaune div.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Answer 4

Position Par Rapport:

Si vous spécifiez la position:relative, alors vous pouvez utiliser le haut ou le bas et la gauche ou la droite pour déplacer l'élément par rapport à l'endroit où il devrait normalement se produire dans le document.

Position Absolue:

Lorsque vous spécifiez la position:absolute, l'élément est supprimé du document et placé exactement où vous dites qu'il aille.

Voici un bon tutoriel http://www.barelyfitz.com/screencast/html-training/css/positioning/ avec l'exemple de l'utilisation de la position avec respectivement à l'absolu et le positionnement relatif.

Answer 5

Marco Pellicciotta: La position de l'élément dans un autre élément peut être relative ou absolue, par rapport à l'élément à l'intérieur.

Si vous avez besoin de positionner l’élément du point de vue de la fenêtre du navigateur, il est préférable d’utiliser position: fixed