[CSS / HTML] Verständnissfrage zu Margin-Werten im Box-Modell

[Wiesl]

Hallo Leute!

Ich bräuchte kurz eure Hilfe, um das Box-Modell in CSS, besonders die Margin-Werte ein wenig besser zu verstehen.

Ich weiß, dass ich mit margin, die Abstände des Divs, entweder absolut oder relativ, und mit absoluten oder prozentualen Werten bestimmen kann.

Allerdings verwirrt mich eine negative Prozentangabe sehr.

Folgendes Beispiel (center, right und left sind in einem größerem Div):

#center {
  position: relative;  
  float: left;
  width: 100%;
}
#left {
  position: relative;  
  float: left;
  width: 200px;
}
#right {
  position: relative;  
  float: left;
  width: 150px;
}

sieht so aus:


habe ich verstanden, aber warum ordnet sich das Div "left" bei margin -100% so an?!?!?:

#left {
  position: relative;  
  float: left;
  width: 200px;
  margin: -100%;

Das verstehe ich nicht, denn was bedeutet das -100% genau, doch eigentlich nur, dass es um eine komplette Breite des übergeordneten Divs nach links geschoben wird, oder?

Vielleicht kann mir jemand auf die Sprünge helfen.

Vielen Dank im Vorraus

Wiesl

 

[wanon256]

Hi

Nach dem W3schools wiki wird auf jeder Seite ein margin von -100% bestimmt.

•margin:25px;
all four margins are 25px

Quelle

Der negativwert bedeutet in diesem Fall, dass das Ganze Element im bestimmten Rahmen sich überschneiden darf/tut. Dies um 100% des angegebenen (in diesem Fall wo "margin: -100%;" steht) divs.

Du erlaubst mit einem negativen Margin nur eine Überlappung der Elemente, nicht das anordnen.

Gruss

 

[Teisi]

sers,

oder das hinausschieben aus dem sicht-, darstellungsbereich des fensters/browsers

grüße