Wofür ist die Position relativ nützlich?

Question

Ich dachte an heute Positioniermodi CSS und erkannte, dass ich position:relative nie andere für etwas verwenden, als position:absolute Arbeit auf untergeordneten Elemente zu machen.

Ich bin eher ein "Entwickler" als ein "Designer", aber ich habe im Laufe der Jahre einige CSS-basierte Layouts gemacht. Ich habe verwendet Tabellen, float, Margen (positiv und negativ), position: absolute und sogar Position: fest, aber ich glaube nicht, dass ich jemals eine Gelegenheit habe, wo ich Position benutzt habe: relative für eine tatsächlich Positionierung Element.

Gibt es eine großartige CSS-Guru-Technik, die auf Position basiert: relativ (und wird in realen Designs verwendet)? Verpasse ich es?

Answer 1

Es ist nützlich, wenn Sie ein Element versetzen möchten, ohne mit Rändern und seinen Konsequenzen für andere Elemente herumzulaufen. Angenommen, Sie möchten ein Bild absichtlich haben, aus der Seite eines Behälters stecken und (fast) Überlappung mit Inhalt in einem Behälter daneben.

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

Container a ist Teil des normalen Textfluss von X und Sie wollen es auch bleiben, man muss nur wollen, dass es aus der Seite ein wenig als ordentlich Effekt Stossen. Wenn Sie das mit Rändern machen, kann es sehr unordentlich werden und einige Ihrer anderen Inhalte neu füllen.
von position: relative; left: 10px; verwenden, können Sie diesen Effekt leicht ohne die Nebenwirkungen bekommen.

Answer 2

ich verwendet habe es mehr als einmal Dinge wie Header-Bilder anzuzeigen, so etwas wie:

<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); } 

In diesem Fall wird der Header hat einen großen Streifen den ganzen Weg Überall als Hintergrundbild sitzt das Logo im Streifen nur etwas versetzt. Einfacher als Padding/Marge in einigen Fällen, um Dinge ein wenig zu verschieben, denke ich, vielleicht ist es nur die Meinung.

Answer 3

Ich verwende es hauptsächlich, wenn ich ein absolutes Element relativ zu seinem Elternelement positionieren möchte. In diesem Fall muss das übergeordnete Element auf position: relative festgelegt werden. Dafür ist es da.

Weiter benutze ich es auch hier und da, IE6/7 haslayout/flackernde Bugs in Blockelementen mit einem Hintergrundbild zu beheben.

Answer 4

Ich habe posotion: relative in der Vergangenheit für ein Containerelement verwendet, mit absolut positionierten Elementen darin (wie ein zentriertes dreispaltiges Layout). Zum Beispiel:

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

Ich gebe nicht den Behälter jeden Versatz, aber es mit position: relative Positionierung erlaubt es mir absolut, um die Spalten relativ zu dem Behälter zu positionieren. Wenn der Behälter auf position: static gesetzt ist, wie es standardmäßig ist, dann werden die Spalten absolut relativ zum Browser Ansichtsfenster positioniert ist, nicht der Behälter.

Answer 5

Ich benutze position:relative;, so dass hochgestellte Zeichen noch über vertical-align: top; aufsteigen können, aber sie nicht erlauben, mit dem Führen meiner Absätze zu verwirren.

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