Überlagerung zweier sections

[froooast]

Hallo zusammen,

ich bin gerade dabei etwas mehr über html zu lernen. Bis jetzt komme ich ganz gut voran und habe auch schon etwas rumgespielt.
Zur Zeit stehe ich jedoch vor einem kleinem Problem:
Bei der einen Übung mit section stehe ich vor dem Problem, dass meine sections sich überlagern.
Zusätzlich wollte ich gerne von euch wissen, wie man den Rand der bei display: relative entsteht entfernen kann.

https://thimble.webmaker.org/de/project/172220/edit

Vielleicht könnt ihr mir bei der Lösung des Problems helfen :)

 

[djheke]

meinst du so?

.blubb #bild {
  max-width: 100%; 
  max-height: auto;
  display:block;
}


.blubb {
  border: solid 1px black; 
  top:0;
  left:0;
  width: 100%;
  height: auto;
}

 

[froooast]

leider löst sich das Problem damit nicht

hier mal bei thimble die Variante, damit ihr euch auch das before und after anschauen könnt

https://d157rqmxrxj6ey.cloudfront.net/froooast/22217

 

[djheke]

Ich sehe keine Überlappungen.

 

[felixprogram]

Ich sehe keine Überlappungen

Doch,da sind welche.Das Bild wird nicht ganz angezeigt.
Setze ein attribut top in .hauptartikel,und setz es mal auf 40px. dann müsste es gehen(wurde getestet)

 

[djheke]

Da sind keine!

Gib .blubb und dein .blubb #bild ein margin-bottom:10px; So siehst du dass nix überlappt ist.

 

[felixprogram]

Er meint die überlappung von .blubb und .hauptartikel auf https://thimble.webmaker.org/de/project/172220/edit .
Da sind welche. Gib doch mal .hauptartikel das attribut to:40px auf der Seite,und sieh,was passiert.

 

[djheke]

Das ist der negative Margin. .blubb {margin-bottom: -40px; } Wurde schon korregiert, aber nicht umgesetzt.
TE meldet sich sowieso nicht, als AL.

 

[SpiceLab]

.blubb {
  border: solid 1px black;
  top:0;
  left:0;
  width: 100%;
  height: auto;
  /*margin-bottom: -40px;*/ /* zu Demonstrationszwecken auskommentiert */
}

https://jsfiddle.net/spicelab/3n7L5hw4/