Position Relative vs absolue?

Le positionnement" relatif "et" absolu " sont vraiment relatifs, juste 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 dans une position en exposant. Le positionnement "absolu" est approprié pour placer un élément dans un système de coordonnées définies par un autre élément, par exemple pour "surimprimer" une image avec du texte.

En tant que Spécial, utilisez un positionnement "relatif" sans déplacement (juste en définissant position: relative) pour faire d'un élément un cadre de référence, de sorte que vous pouvez utiliser un positionnement "absolu" pour les éléments qui s'y trouvent (en 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'affect suivant:

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

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 top ou bottom, et left ou right pour déplacer l'élément par rapport à l'endroit où il se produirait normalement dans le document.

Position Absolue:

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

Voici un bon tutoriel http://www.barelyfitz.com/screencast/html-training/css/positioning / avec l'utilisation de l'échantillon des deux positions avec respectivement le positionnement absolu et relatif.

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

Absolute: un élément positionné absolu est positionné par rapport à son PARENT positionné le plus proche. si l'on est présent, alors cela fonctionne comme corrigé.....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 position du 2ème parent div est relative, donc le milieu div changera sa position par rapport au 2ème parent div. Si le 1er parent div position serait relative alors le milieu div changerait sa position par rapport au 1er parent div. Détails

Mettre une réponse, comme ma réputation aint assez pour commenter. Mais ne regardez pas cela comme une réponse, juste une information supplémentaire, comme moi, a eu quelques problèmes avec le pied de page, et le positionnement.

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

J'ai ensuite trouvé quelques problèmes avec mon contenu de texte, et un menu dans le même contenu (partie blanche de la page entre l'en-tête et le pied de page), quand en les définissant sur absolu, le pied de page ne reste plus bas.

Postitioning est, comme vous 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é, quand dans l'exemple ouvrir un menu déroulant, était de lui donner une position relative, et de le mettre 35em en dessous de mon menu déroulant. (35em est la hauteur de mon menu déroulant, lorsqu'il est complètement étendu)

Ensuite, Top: - 35em, pour le contenu qui avant a été poussé à la 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 c'est côte à côte avec mon menu déroulant! Et l'espace blanc ci-dessous jusqu'au pied de page, est avec seulement 10EM de marge, comme c'était 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 votre question est bien répondue, mais après beaucoup de problèmes, j'ai trouvé que c'était une très bonne solution, et un moyen de mieux comprendre comment le positionnement travail.. Lorsque je place mon contenu de texte, en dessous de mon menu déroulant, il ne pousse pas mon texte sur le côté. Si j'ai changé le texte en position absolue, le pied de page n'est pas resté 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, en dessous de ma liste déroulante.

Ensuite, je le mets visuellement juste à côté l'un de l'autre, avec une position relative, et en haut: - 35em;, et en soirée l'immense espace ci-dessous, avec marge: - 35em;

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

Naturellement, position fixe, semblait aussi logique pour mon pied de page, mais je veux vraiment que le pied de page aille en dessous de 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 un plus fluide / dynamique mise en page! :)

(Il peut y avoir de meilleures solutions, mais cela fonctionne pour moi cross plates-formes, ainsi que des dispositifs).

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

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

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

À l'intérieur de l'élément body, dites que vous avez un élément d'en-tête dont la hauteur est de 95% de viewheight, c'est-à-dire 95vh. Dans ce conteneur, vous avez placé une image et réduit son opacité pour dire 0.5. Et maintenant, vous voulez placer une image de logo près du coin supérieur gauche. J'espère que vous avez compris le scénario. Ainsi, vous aurez une image plus claire dans la section d'en-tête avec un logo sur le dessus à l' position.

Mais avant de commencer cela, j'ai mis margin et padding à 0 comme ceci

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

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

Ainsi vous pouvez réaliser votre condition de deux manières.

Première Façon

• Vous donnez une classe à l'image disons logo.

• En css vous écrivez

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

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

Mais mon ami, c'est une mauvaise conception de placer une image que vous avez inutilement consommée tant d'espace en lui donnant une certaine marge quand elle n'était pas nécessaire. Tous vous avez besoin est de placer l'image à cet endroit. Vous l'avez géré en l'amortissant avec des marges autour. La marge a pris de l'espace et poussé son contenu plus profond donnant l'impression qu'il est positionné exactement là où vous le vouliez. J'espère que vous compris la question par travail autour de ce genre. Vous prenez plus d'espace que nécessaire pour placer l'image à l'endroit désiré.

Essayons maintenant une approche différente.

Deuxième Façon

• l'image avec la classe logo est à l'intérieur de l'élément d'en-tête avec say header class. Donc, la classe parent est en-tête et la classe enfant est logo comme avant.

• Vous définissez la propriété position de la classe d'en-tête sur relative like ce

  .header{ position: relative; }

• Ensuite, vous avez ajouté les propriétés suivantes à la classe logo

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

Voilà. Vous avez placé l'image exactement au même endroit. Il n'y aura pas de différence apparente dans le 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 zone autant que sa propre largeur et hauteur.

Alors, comment est-ce possible? J'ai dit à la classe image logo que vous serez placé relatif à la classe d'en-tête car vous êtes l'enfant de cette classe et que j'ai spécifiquement mentionné sa position comme relatif. De sorte que 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 absolute . Et que vous devez vous déplacer un peu de haut et de gauche à la position je veux que vous soyez. Par conséquent, vous êtes donné la propriété top et left avec 40px comme valeur. De cette façon vous serez placé par rapport à votre mère seulement. 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 l'en-tête de votre parent. Donc, votre position est fixe à l'intérieur de votre parent, peu importe si la position de votre parent est fixe ou non à l'avenir(car elle n'est pas absolue comme vous).

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

Merci.