Php, Css, Bild über Bild.

[GigaInside]

Vorab ich bin neu auf dem Forum und auch was die Programmierung betrifft. Allerdings will ich besser werden.
Ich möchte auf meine Website ein Bild über Bild packen. Allerdings scheitere ich an solche einfachen Aufgaben.

Wenn ich bei Left und top was verändere bringt das übrigens nichts. Hatte bei Top:-100 oder Top:100 stehen. Einfach um zu schauen ob sich überhaupt was verändert hat.

<span class="headline">
    <img src="images/Background.png" class="Hintergrund" alt="">
    <img src="images/Logo.png" class="Logo" alt="">
</span>

span.headline {
    position:relative;
    display:block;
}

span.headline Hintergrund.Logo {
    position:relative;
    display:block;
}

span.headline Hintergrund.Logo {
    position:absolute;
    top:0;
    left:0;
}

 

[basti1012]

an besten währe wenn man gleich mit Flexbhox startet.
Außerdem ist deine Css Falsch.
Vor Hintergrund muß ein Punkt

Am besten kann man helfen wenn man alles kenen tut oder zumindest weiß wie es werden soll.
Bei deinen jetztigen Code gebe es viele möglichkeiten das übereinander zu stellen
Zb Flexbox

.headline{
  width:100px;
  display:flex;
  flex-direction:column;
}

Oder:

.headline{
  display:block;
width:100px;//Breite der Bilder
}

oder mit den festen Werten wie du es vor hattest

.headline{
   position:absolute;
   top:100px;
   left:100px;
}
.headline img{
   position:absolute;
   left:0;
}
.Hintergrund + img{
   top:100px;
}

Nur darauf sollte man verzichten weil man dann den Code kaum noch responsive hinbekommt

 

[GigaInside]

Flexbhox? mmmm ich lese mich da mal ein. Und danke für die schnelle Hilfe.

 

[Jan-Frederik Stieler]

Hallo,
@GigaInside erstmal zu Deinem Code.

• Am besten gewöhnst Du Dir an für Klassen in einer Sprache zu bleiben und dann am besten auch in englisch. Ich find es immer sehr merkwürdig wenn ich deutsche Variablen oder Klasse/ID im Quellcode sehe.
• Dann schreibe Klassen immer klein. CSS ist case insensitive. Heißt großgeschriebene sind für CSS trotzdem kleingeschrieben.
• Dann schau Dir mal das Boxmodell an. Du wandelst spans in ein Blockelement um das ist eigentlich unnötig da es dafür Divs gibt.
• Wenn Du per CSS ein nachfolgendes Element selektieren willst dann nutze den Adjacent-Selektor (Direkter Nachbar-Selektor) .Hintergrund + .Logo.
  Das was Du gemacht hast selektiert ein und das selbe Element wenn es beide Klassen besitzt.
• Die Spezifität Deiner Selektoren sind hier zu hoch. Es reicht nur die Klassen zum selektieren zu verwenden. Außer Du hast noch weitere Elemente mit der Klasse .Hintergrund.
  Aber grundsätzlich ist es immer besser keine HTML-Elemente und IDs mit in den CSS-Code reinzunehmen. Das strukturiert auch Dein CSS besser. IDs am besten auch nur für JS verwenden.
  Es gibt Tools welche die IDs dynamisch setzen und dann bekommst Du per CSS Probleme.
• Versuche immer mit möglichst wenig Abhängigkeit zu arbeiten. Außer Du brauchst es wegen der Semantik in CSS oder weil Klassen öfters verwendet werden.

Hier kannste sehen wie ich das gemacht hätte:
JS Bin

Die erste ist mit Flexbox und die zweite die klassische Variante.
Was die Problematik mit der responivenes betrifft, wenn Du das Elternelement relative positionierts verhält sich dieses ja noch nach dem Zeilenfluss nur die Kindelemente davon sind absolut gesetzt. Somit würden nur diese Elemente sich auf das Elternelement beziehen und man kann ja auch per mediaqueries dann die absoluten Werte ändern. basti1012 glaub ich auch eher das adaptive Verhalten und nicht das responive.
Wenn mans richtig anwendet geht es schon noch.

Grüße