Quelle est la position: relative utile pour?

Question

Je pensais aux modes de positionnement CSS aujourd'hui et j'ai réalisé que je n'utilise jamais position:relative pour autre chose que de faire position:absolute travailler sur des éléments enfants.

Je suis plus d'un « développeur » qu'un « designer », mais je l'ai fait tout à fait quelques mises en page CSS au fil des ans. J'ai utilisé des tables, float, marges (positives et négatives), position: absolute, et même position: fixed, mais je ne pense pas avoir jamais eu l'occasion d'utiliser la position: relative pour positionner un élément.

Y at-il une grande technique gourou CSS qui repose sur la position: relative (et est utilisé dans les conceptions du monde réel)? Est-ce que je rate quelque chose?

Answer 1

Il est utile si vous souhaitez décaler un élément sans futzing autour des marges et ses conséquences pour les autres éléments. Imaginons que vous vouliez intentionnellement faire apparaître une image sur le côté d'un conteneur et (presque) chevaucher du contenu dans un conteneur à côté de celui-ci.

------------- ----- 
|   | | | 
| X -------| Y | 
|  | a || | 
|  -------| | 
------------- ----- 

Container a fait partie du flux de texte normal de X et que vous voulez garder cette façon, vous voulez juste piquer sur le côté un peu comme un effet propre. Si vous faites cela avec des marges, cela peut devenir vraiment désordonné et rediffuser certains de vos autres contenus. En utilisant position: relative; left: 10px;, vous pouvez obtenir cet effet facilement sans effets secondaires.

Answer 2

Je l'ai utilisé plus d'une fois pour afficher des choses comme des images d'en-tête, quelque chose comme:

<div id="header"> 
    <div id="logo"></div> 
<div> 

CSS:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); } 
#logo { position: relative; left: 40px; background: url(logo.jpg); } 

Dans ce cas, l'en-tête a une large bande tout le chemin à travers en tant qu'image de fond, le logo se trouve dans la bande juste compenser un peu. Plus simple que le rembourrage/la marge dans certains cas pour faire bouger les choses un peu je pense, peut-être que c'est juste de l'opinion.

Answer 3

Je l'utilise surtout quand je veux placer un élément absolu par rapport à son élément parent. Dans ce cas, l'élément parent doit être défini sur position: relative. C'est là que ça sert.

De plus, j'utiliser aussi ici et là pour corriger IE6/7 bogues hasLayout/scintille éléments de bloc avec une image d'arrière-plan.

Answer 4

Je l'ai utilisé posotion: relative dans le passé pour un élément conteneur, avec des éléments absolument positionnés à l'intérieur (comme un centré sur la mise en page à trois colonnes). Par exemple:

alt text http://www.freeimagehosting.net/uploads/2573654d07.png

Je ne donne pas le récipient tout décalage, mais le positionnement avec position: relative me permet de positionner absolument les colonnes par rapport au conteneur. Si le conteneur est défini sur position: static, comme c'est le cas par défaut, les colonnes seront positionnées de façon absolue par rapport à la fenêtre d'affichage du navigateur et non au conteneur.

Answer 5

J'utilise position:relative; de sorte que les caractères en exposant puissent encore monter au-dessus de vertical-align: top; mais ne leur permettent pas de jouer avec le début de mes paragraphes.

sup { 
    font-size: .7em; 
    vertical-align: top; 
    position: relative; 
    top: -.1em; 
}