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

Wiesl

Lt. Junior Grade
Dabei seit
Feb. 2011
Beiträge
417
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):
Code:
#center {
  position: relative;  
  float: left;
  width: 100%;
}
#left {
  position: relative;  
  float: left;
  width: 200px;
}
#right {
  position: relative;  
  float: left;
  width: 150px;
}
sieht so aus:
diagram_02.gif

habe ich verstanden, aber warum ordnet sich das Div "left" bei margin -100% so an?!?!?:
Code:
#left {
  position: relative;  
  float: left;
  width: 200px;
  margin: -100%;
diagram_03.gif

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

Ensign
Dabei seit
Sep. 2012
Beiträge
177
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
 
Zuletzt bearbeitet:

Teisi

Lt. Junior Grade
Dabei seit
Okt. 2008
Beiträge
439
sers,

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

grüße
 
Top