Wie wirkt sich die CSS-Position auf ein Div auf die Position der Geschwisterabteilung aus?

Ich habe CSS Positions articles on Alistapart durchlaufen. Das folgende Snippet erregte meine Aufmerksamkeit und konnte die Theorie dahinter nicht verstehen.Wie wirkt sich die CSS-Position auf ein Div auf die Position der Geschwisterabteilung aus?

Unten html/css zeigt zwei Boxen eins über andere. Aber wenn ich die Position von # box_1 auf absolut ändere, dann überlappt # box_2 # box_1.

<!DOCTYPE html > 
<html lang="en"> 
<head> 
    <style> 
     #box_1 { 
      position: relative; 
      width: 200px; 
      height: 200px; 
      background: #ee3e64; 
     } 
     #box_2 { 
      position: absolute; 
      width: 200px; 
      height: 200px; 
      background: #44accf; 
     } 
    </style> 
</head> 
<body> 
    <div id="box_1"></div> 
    <div id="box_2"></div> 
</body> 
</html>

Wie funktioniert die Position einer anderen Box (box_1) wirkt Position eines anderen/Geschwister div (box_2). Ist 'absolut' nicht immer absolut nur auf unmittelbare nicht-statische Eltern?
In den obigen css (mit "position: relative;" in box_1), wenn ich "top: 0;" bis # box_2, dann scheint box_2 erneut zu überlappen. Warum passiert das?

Quelle

2013-02-12 Dbob

Ein absolut positionierten Element wird in seiner statischen Position bleiben, wenn Sie nicht jede seiner top angeben, right, bottom oder left Eigenschaften, unabhängig davon, ob bei einem seiner Vorgänger positioniert ist. Deshalb scheint nichts mit #box_2 zu passieren, wenn Sie es einfach auf position: absolute setzen - stattdessen wird es von #box_1 auf dieselbe Weise beeinflusst, als hätten Sie position: absolute nicht angegeben.

Beachten Sie jedoch, dass #box_1 nur #box_2 betrifft, weil 1 vor 2 steht; Sobald Sie absolut Position #box_2 ist es aus dem Fluss genommen und alle Geschwister, die es folgen wird fließen, als ob #box_2 nicht mehr da war. Siehe this example, wo ich ein #box_3 erstellen, die auf #box_1 identisch sind, und fügen Sie es nach#box_2, bei der #box_3 überlappt #box_2 weil 3 2 nicht sehen im normalen Fluss; es sieht nur 1.

Sobald Sie top: 0 auf #box_2 setzen, dann weiß es, dass es an den oberen Rand des Ansichtsfensters angehängt werden muss (als sein umschließender Block, da keiner seiner Vorfahren positioniert ist).

Quelle

2013-02-12 08:37:18 BoltClock

Ah, das ist, was ich suche ("Ein absolut positioniertes Element bleibt in seiner statischen Position, wenn Sie keine seiner oberen, rechten, unteren oder linken Eigenschaften angeben"). Danke ein Haufen und +10 Stimmen; wenn nur sf es erlaubt :) – Dbob

Die CSS-Position in einem Div beeinflusst nicht die Position der Geschwister-Division, sondern betrifft die untergeordneten Elemente. Zum Beispiel:

HTML:

<div id="parent_1"> 
    <div id="child_1"></div> 
    <div id="child_2"></div> 
    </div>

CSS:

#parent_1{ 
     position: relative; 
     width: 400px; 
     height: 400px; 
     background: gray; 
    } 
#child_1 { 
    position: absolute; 
    left:20px; 
    top:20px; 
    width:40px; 
    background:yellow; 
} 
#child_2 { 
    position: absolute; 
    right:20px; 
    top:20px; 
    width:40px; 
    background:blue; 
}

jetzt # parent_1 wird eine Box 400 * 400 und # child_1 wird im Inneren Mutter div schaffen und positioniert 20px von links und 20px von oben.

Quelle

2013-02-12 08:53:10 Amit

wie bezieht sich das auf die Frage überhaupt? – Dbob

Ihre Fragen war "CSS-Position auf einem div beeinflusst die Position der Geschwister-Abteilung?", Meine Antwort ist NEIN, es tut es nicht, es betrifft nur nur Kind-Divisionen/Kind-Elemente. – Amit

Es wirkt sich indirekt aus. Bitte lesen Sie die Frage vollständig durch. – Dbob

Wie wirkt sich die CSS-Position auf ein Div auf die Position der Geschwisterabteilung aus?

Antwort

Verwandte Themen