Comment fonctionne la position absolue dans css?

Question

Pourquoi positionner la largeur du contenu de remplissage absolu seulement plutôt que la position de remplissage relatif pleine largeur.

position:absolute; 
position:relative; 

Je ne sais pas comment cela fonctionne. S'il vous plaît aidez-moi. Merci à chaque Avancé!

Answer 1

Un élément avec une position: relative; est positionné par rapport à sa position normale.

La définition des propriétés supérieure, droite, inférieure et gauche d'un élément positionné de façon relative entraînera son retrait par rapport à sa position normale. Les autres contenus ne seront pas ajustés pour tenir compte de l'espace laissé par l'élément.

Un élément avec une position: absolue; est positionné par rapport à l'ancêtre positionné le plus proche (au lieu de positionné par rapport à la fenêtre, comme fixe).

Cependant; Si un élément positionné en absolu n'a pas d'ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement de la page.

Référez ici si vous aimez: https://www.w3schools.com/css/css_positioning.asp

Answer 2

relative
Ce type de positionnement est probablement le plus confus et mal utilisé. Ce que cela signifie vraiment est "par rapport à lui-même". Si vous définissez la position: relative; sur un élément mais aucun autre attribut de positionnement (haut, gauche, bas ou droite), cela n'aura aucun effet sur son positionnement, il sera exactement comme si vous le laissiez en position: statique; Mais si vous lui donnez un autre attribut de positionnement, disons, top: 10px ;, il déplacera sa position de 10 pixels par rapport à ce qu'elle serait normalement. Je suis sûr que vous pouvez imaginer, la capacité de déplacer un élément en fonction de sa position régulière est très utile. Je me retrouve à l'utiliser pour aligner des éléments de formulaire plusieurs fois qui ont tendance à ne pas vouloir aligner comme je le veux.
Deux autres choses se produisent lorsque vous définissez la position: relative; sur un élément que vous devriez connaître. Le premier est qu'il introduit la possibilité d'utiliser z-index sur cet élément, qui ne fonctionne pas vraiment avec des éléments statiquement positionnés. Même si vous ne définissez pas de valeur d'index z, cet élément apparaîtra désormais au-dessus de tout autre élément positionné statiquement. Vous ne pouvez pas le combattre en définissant une valeur d'index z plus élevée sur un élément positionné statiquement. L'autre chose qui arrive est qu'elle limite la portée des éléments enfants positionnés de manière absolue. Tout élément qui est un enfant de l'élément relativement positionné peut être absolument positionné dans ce bloc. Cela amène de puissantes opportunités dont je parle ici.

Absolue
Il s'agit d'un type de positionnement très puissant qui vous permet de placer littéralement n'importe quel élément de page exactement où vous le souhaitez. Vous utilisez les attributs de positionnement en haut, à gauche, en bas. et droit de définir l'emplacement. Rappelez-vous que ces valeurs seront relatives à l'élément parent suivant avec un positionnement relatif (ou absolu). S'il n'y a pas de parent, il retournera par défaut à l'élément lui-même, ce qui signifie qu'il sera placé relativement à la page elle-même. Le compromis (et le plus important à retenir) sur le positionnement absolu est que ces éléments sont supprimés du flux 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 les autres éléments. C'est une chose sérieuse à considérer chaque fois que vous utilisez le positionnement absolu. Son utilisation abusive ou inappropriée peut limiter la flexibilité de votre site.