Nach W3Schools (http://www.w3schools.com/css/css_positioning.asp):Absolute Positionierung innerhalb der relativen Positionierung?
relativ positionierten Elemente als Behälterblöcke für absolut positionierten Elemente häufig verwendet werden.
Warum ist das? Gibt es ein gutes Beispiel?
Ein gutes Beispiel wäre, wenn Sie etwas auf der Seite oder "relativ" zu einem Container/div positionieren möchten.
Hier ist meine Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/
Dies zeigt Ihnen, dass ohne die absolute div innerhalb einer „relativen“ div ist, wird der Inhalt des Dokuments Körper ausgerichtet sind.
Hinweis, dass die grüne div (#box1), die position: relative hat, die div Innere (#inner1) es oben/innen rechts #box1 ausgerichtet ist.
Die blaue Box (#box2), die genau die gleiche HTML-Layout wie die grüne Box hat (#box1), nicht enthalten position: relative und feststellen, dass die div Inneren (#inner2) nach oben/rechts neben der body ausgerichtet ist,
#box1, #box2 {
width: 100px;
height: 100px;
color: white;
text-align: center;
line-height: 100px;
}
#box1 {
background: green;
position: relative;
}
#box2 {
background: blue;
}
#inner1, #inner2 {
width: 50px;
height: 50px;
top: 0;
right: 0;
position: absolute;
background: black;
opacity: 0.5;
color: white;
text-align: center;
line-height: 50px;
}
Hier ist ein guter Artikel über sie von Chris Coyier ...
ein Seitenelement mit einer relativen Posi Die Steuerung ermöglicht Ihnen, die Kinderelemente innerhalb von absolut zu positionieren.
Quelle: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Wenn ein absolutes positioniertes Element nicht in einem relativen Elemente ist dann, wenn Sie oben gesetzt, links, rechts, oder bietet mit einem Wert, wird das absolute Position Element aus der Bewegung Körper um diesen Wert. Was bedeutet das? Wenn Sie beispielsweise das Attribut eines absoluten Positionselements, top, auf 10px setzen, wird das Element 10 Pixel vom oberen Bildschirmrand entfernt.
Wenn ein absolutes Positionselement in einem relativen Element enthalten ist, wird das absolute Positionselement von diesem relativen Element um diesen Wert verschoben, wenn Sie top, left, right oder bot mit einem Wert festlegen. Was bedeutet das? Wenn Sie beispielsweise das Attribut eines absoluten Positionselements, top, auf 10px setzen, wird das Element 10 Pixel vom oberen Rand des relativen Elements entfernt. Dort können Sie das relative Element umherbewegen und das absolut positionierte Element wird immer 10 Pixel vom oberen Rand des relativen Elements entfernt sein.
Was die anderen Antworten nicht explizit Zustand ist dies:
Absolute Positionierung gemessen wird, wie im nächsten Vorfahren, die nicht statisch Positionierung haben. Eine relative Position der Vorfahren zu geben, ist nur ein Mittel zu diesem Zweck. Es muss nicht relativ sein, es kann einfach nicht statisch sein.
Ein Element mit absoluter Position und
top: 10px;
wird 10 Pixel von der Spitze des nächsten Vorfahren, dessen Position nicht statisch ist.
Danke. Aber es beantwortet die Frage nicht vollständig. Die inneren divs sind relativ zum ersten übergeordneten div positioniert, das nicht die Standardpositionierung von statisch hat. Wenn wir also box2 positionieren lassen, erhalten wir das gleiche Ergebnis wie relativ. Dies wirft die Frage auf, was so besonders ist, Elternteil div als relativ zu haben? Danke –
@MoreThanFive Du könntest das tun, aber jetzt wird dein '# box2' div sich innerhalb des Körpers bewegen, als wäre es jetzt' # inner2'. Hier ist ein Beispiel http://jsfiddle.net/doitlikejustin/RdWQ7/3/ Ich fügte "richtig" hinzu, so dass Sie sehen können, wie sie unterschiedlich sind. – doitlikejustin
Ich sehe was du meinst. –