Position relative vs absolue?

Quelle est la différence entre position: relativeet position: absoluteen CSS? Et quand devriez-vous utiliser lequel?

Positionnement CSS absolu

position: absolute;

Le positionnement absolu est le plus simple à comprendre. Vous commencez par la positionpropriété CSS :

position: absolute;

Cela indique au navigateur que tout ce qui va être positionné doit être supprimé du flux normal du document et sera placé à un emplacement exact sur la page. Cela n'affectera pas la façon dont les éléments avant ou après lui dans le HTML sont positionnés sur la page Web, mais il sera soumis au positionnement de ses parents à moins que vous ne le remplaciez.

Si vous souhaitez positionner un élément à 10 pixels du haut de la fenêtre du document, vous utiliserez le topdécalage avec positioncelui-ci avecabsolute positionnement:

position: absolute;
top: 10px;

Cet élément s'affichera alors toujours 10pxdu haut de la page quel que soit le contenu qui passe à travers, sous ou sur l'élément (visuellement).

Les quatre propriétés de positionnement sont:

1. top
2. right
3. bottom
4. left

Pour les utiliser, vous devez les considérer comme des propriétés de décalage. En d'autres termes, un élément positionnéright: 2px n'est pas déplacé vers la droite 2px. Son côté droit est décalé du côté droit de la fenêtre (ou de sa position qui remplace le parent) par 2px. La même chose est vraie pour les trois autres.

Positionnement relatif

position: relative;

Le positionnement relatif utilise les quatre mêmes propriétés de absolutepositionnement que le positionnement. Mais au lieu de baser la position de l'élément sur le port de vue du navigateur, il commence à partir de l'endroit où l'élément serait s'il était toujours dans la normale flux .

Par exemple, si vous avez trois paragraphes sur votre page Web et que le troisième a un position: relative style, sa position sera décalée en fonction de son emplacement actuel, et non des côtés d'origine du port d'affichage.

Paragraphe 1.

Paragraphe 2.

Remarques:

• la valeur par défaut widthd'un élément qui est positionné de manière absolue est la largeur du contenu qu'il contient, contrairement à un élément relativement positionné là où sa valeur par défaut widthest 100%l'espace qu'il peut remplir.

• Vous pouvez avoir des éléments qui se chevauchent avec des éléments positionnés de manière absolue, alors que vous ne pouvez pas le faire avec des éléments relativement positionnés (nativement c'est-à-dire sans l'utilisation de marges / positionnement négatifs)

lots tirés de: cette ressource

Le positionnement «relatif» et «absolu» est vraiment relatif, mais avec un cadre différent. Le positionnement «absolu» est relatif à la position d'un autre élément englobant. Le positionnement «relatif» est relatif à la position que l'élément lui-même aurait sans positionnement.

Cela dépend de vos besoins et objectifs que vous utilisez. La position «relative» convient lorsque vous souhaitez déplacer un élément de la position qu'il aurait autrement dans le flux d'éléments, par exemple pour faire apparaître certains caractères en exposant. Le positionnement «absolu» convient pour placer un élément dans un système de coordonnées défini par un autre élément, par exemple pour «surimprimer» une image avec du texte.

En particulier, utilisez un positionnement «relatif» sans déplacement (juste un réglage position: relative) pour faire d'un élément un cadre de référence, afin que vous puissiez utiliser un positionnement «absolu» pour les éléments qui se trouvent à l'intérieur (dans le balisage).

Une autre chose à noter est que si vous voulez qu'un élément absolu soit confiné à un élément parent, vous devez définir la position de l'élément parent sur relative. Cela gardera l'élément enfant contenu dans l'élément parent et il ne sera pas "relatif" à la fenêtre entière.

J'ai écrit un article de blog qui donne un exemple simple qui crée l'effet suivant:

Cela a un div vert qui est absolument positionné au bas du div jaune parent.

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

Position relative:

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

Position absolue:

Lorsque vous spécifiez position: absolue, l'élément est supprimé du document et placé exactement là où vous lui demandez d'aller.

Voici un bon tutoriel http://www.barelyfitz.com/screencast/html-training/css/positioning/ avec l'exemple d'utilisation des deux positions avec positionnement respectif à absolu et relatif.

Relative: par rapport à sa position actuelle, mais peut être déplacée. Ou un élément positionné RELATIF est positionné par rapport à lui-même.

Absolu: un élément positionné ABSOLU est positionné par rapport à SON PARENT POSITIONNÉ LE PLUS PROCHE. s'il y en a un, alors cela fonctionne comme fixe ..... par rapport à la fenêtre.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Ici, la divposition du 2ème parent est relative, donc le milieu divchangera sa position par rapport au 2ème parent div. Si la divposition du 1er parent était relative, le milieu divchangerait sa position par rapport au 1er parent div. Détails

Mettre une réponse, car ma réputation ne suffit pas à commenter. Mais ne considérez pas cela comme une réponse, juste une information supplémentaire, car moi-même, j'ai eu des problèmes avec le pied de page et le positionnement.

Lors de la configuration de la page, afin que mon pied de page reste toujours en bas, avec une position absolue, et le conteneur / wrapper principal avec une position relative.

J'ai ensuite trouvé des problèmes avec mon contenu texte et un menu à l'intérieur du même contenu (partie blanche de la page entre l'en-tête et le pied de page), lors de la définition de ceux-ci sur absolu, le pied de page ne reste plus en bas.

L'affichage est, comme vous le dites, un thème complexe.

Ma solution, au contenu que je voulais en position `` absolue '' dans ma page Web, et ne pas être poussé sur le côté, lors de l'ouverture d'un menu déroulant par exemple, était de lui donner une position relative, et de le mettre 35em sous ma liste déroulante menu. (35em est la hauteur de mon menu déroulant, lorsqu'il est complètement étendu)

Ensuite, Top: -35em, pour le contenu qui était auparavant poussé sur le côté. Et puis en ajoutant margin-bottom: -35em. De cette façon, le contenu est "en dessous" de mon menu déroulant, mais visuellement, il est côte à côte avec mon menu déroulant! Et l'espace blanc ci-dessous jusqu'au pied de page n'a qu'une marge de 10em, comme avant de commencer à jouer avec cela. Donc, ma solution à cela était comme ceci:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Je vois que la réponse à votre question est bonne, mais après beaucoup de problèmes, j'ai trouvé que c'était une très bonne solution et un moyen de mieux comprendre le fonctionnement du positionnement. t pousser mon texte sur le côté. Si j'ai changé le texte en position absolue, le pied de page ne restait pas en place. Comme je peux croire que c'est un problème pour plus de gens que moi, j'ajoute ceci ici. Ce qui se passe en fait, c'est que je mets le texte, 35ems, sous ma liste déroulante.

Ensuite, je le place visuellement juste à côté de l'autre, avec une position relative, et en haut: -35em ;, et égalise l'énorme espace en dessous, avec une marge: -35em;

les valeurs négatives sont parfois sous-estimées, très bonne fonctionnalité, quand on comprend mieux ces positions!

Naturellement, la position fixe semblait également logique pour mon pied de page, mais je veux vraiment que le pied de page passe sous la fenêtre, si le texte ou le contenu est plus long que la fenêtre. Et pour rester en bas, s'il y a peu de contenu sur la page.

Ce setupp a très bien corrigé cela, et n'oubliez pas d'utiliser 'em', pas 'px' pour une mise en page plus fluide / dynamique! :)

(il y a peut-être de meilleures solutions, mais cela fonctionne pour moi multi-plateformes, ainsi que pour les appareils).

Relatif vs absolu:

• Différence: relative à elle-même, relative à l'ancêtre positionné le plus proche.
• Différence: d' autres éléments autour d'elle honorent son ancienne existence, d'autres éléments autour d'elle n'honorent PAS son ancienne existence.
• Similitude: les autres éléments qui l'entourent n'honorent PAS sa nouvelle existence, les autres éléments qui l'entourent n'honorent PAS sa nouvelle existence.

Discutons d'un scénario pour expliquer la différence entre absolu et relatif.

À l'intérieur de l'élément de corps, dites que vous avez un élément d'en-tête dont la hauteur est de 95% de la hauteur de vue, soit 95vh. Dans ce conteneur, vous avez placé une image et réduit son opacité à 0,5. Et maintenant, vous souhaitez placer une image de logo près du coin supérieur gauche. J'espère que vous avez compris le scénario. Vous aurez donc une image plus claire dans la section d'en-tête avec un logo sur le dessus à la position spécifiée.

Mais avant de commencer, j'ai mis la marge et le remplissage à 0 comme ceci

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Cela garantit qu'aucune marge ni remplissage par défaut n'est appliqué aux éléments.

Ainsi, vous pouvez répondre à vos besoins de deux manières.

Première manière

• vous donnez une classe à l'image, dites logo.

• en css vous écrivez

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• cela a placé le logo au 40px du haut et à gauche du parent englobant qui est l'en-tête. L'image apparaîtra comme si elle était placée comme vous le souhaitez.

Mais mon ami, c'est une mauvaise conception pour placer une image dont vous avez inutilement consommé beaucoup d'espace en lui donnant une certaine marge lorsqu'elle n'était pas nécessaire. Tout ce dont vous aviez besoin est de placer l'image à cet emplacement. Vous l'avez géré en l'amortissant avec des marges autour. La marge a pris de la place et a poussé son contenu plus profondément, donnant l'impression qu'il est positionné exactement où vous le souhaitez. J'espère que vous avez compris le problème en le travaillant comme ça. Vous prenez plus d'espace que nécessaire pour placer juste une image à l'emplacement souhaité.

Essayons maintenant une approche différente.

Deuxième voie

• l'image avec la classe de logo est à l'intérieur de l'élément d'en-tête avec, par exemple, la classe d'en-tête. Ainsi, la classe parente est l'en-tête et la classe enfant est le logo comme avant.

• vous définissez la propriété position de la classe d'en-tête sur relative comme ceci

  .header{ position: relative; }

• puis vous avez ajouté les propriétés suivantes à la classe de logo

  .logo{ position:absolute; top:40px; left:40px }

Voilà. Vous avez placé l'image exactement au même endroit. Il n'y aura aucune différence apparente de positionnement à l'œil nu entre la première approche et la deuxième approche. Mais si vous inspectez l'élément d'image, vous constaterez qu'il n'a pas pris d'espace supplémentaire. Il occupe exactement la même surface autant que sa propre largeur et hauteur.

Alors comment est-ce possible? J'ai dit à la classe de logo d'image que vous serez placé par rapport à la classe d'en-tête car vous êtes l'enfant de cette classe et que j'ai spécifiquement mentionné sa position comme relative . Ainsi, tout enfant de celui-ci sera placé par rapport à son coin supérieur gauche. Et que votre position doit être fixée à l'intérieur de cet élément parent. donc on vous donne absolu. Et que vous devez vous déplacer un peu du haut vers la gauche vers la position que je veux que vous soyez. Par conséquent, vous obtenez la propriété supérieure et gauche avec une valeur de 40px. De cette façon, vous serez placé par rapport à votre parent uniquement. Donc, si demain je déplace votre parent vers le haut ou vers le bas ou n'importe où, vous serez toujours 40px en haut et à gauche du coin supérieur gauche de votre en-tête parent. Ainsi, votre position est fixée à l'intérieur de votre parent, que la position de votre parent soit fixe ou non à l'avenir (car elle n'est pas absolue comme vous).

Utilisez donc respectivement relatif et absolu pour le parent et l'enfant. Deuxièmement, utilisez-le lorsque vous souhaitez placer uniquement l'élément enfant à un endroit à l'intérieur de son élément parent. N'utilisez pas de charges comme des marges pour le pousser de force. Donnez la valeur relative du parent et l'enfant que vous souhaitez déplacer, la valeur absolue. Spécifiez la propriété en haut, en bas à gauche ou à droite de la classe enfant pour la placer dans le parent où vous le souhaitez.

Merci.

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

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