html Text an bestimmter Postition in image anzeigen

[Klaus Gartner (Gast)]

Hi

Ich baue zur Zeit an einer Webseite herum. Auf der Seite wird u.A. ein 
img angezeigt. In diesem Bild befindet sich ein Feld, in dem ein Text 
agezeigt werden soll.

Wie definiere ich in html dass ein Text mit bestimmten, in Relation zum 
img Koordinaten angezeigt werden soll?

[Sven B. (scummos)]

Zum Beispiel indem du beides in ein div tust und dann position:absolute 
setzt, und dann top: und left: für den Text.

[Klaus Gartner (Gast)]

vielen Dank, das hat mich schon mal weiter gebracht.

Ich habe 2 Bilder, das eine wird am linken Rand angezeigt, bei diesem 
stimmt auch der Text überein.
Beim anderen, das am rechten Rand angezeigt wird, verschiebt sich der 
Text je nachdem wie breit das Fenster ist. WIe bekomme ich auch dies in 
den Griff?
Die Fensterbreite muss variabel bleiben, damit die Seite auch auf 
Mobilgeräten richtig angeziegt wird



.image_left {
  position: absolute;
  left: 10px;
}

.text_image_left {
  position: relative;
  color:white;
  top: 63px;
  left: 25px;
}

.image_right {
  position: absolute;
  right: 10px;

}
.text_image_right {
  position: relative;
  color:white;
  top: 63px;
  left: 100px;
}

[DPA (Gast)]

Ersetze mal die position: relative; durch position: absolute;. position: 
absolute; ist immer vom ersten parent element aus, welches ein position 
attribut hat, ausser es ist position: static. 
https://jsfiddle.net/rqyks5b6/

[Daniel F. (df311)]

Klaus Gartner schrieb:
> Ich baue zur Zeit an einer Webseite herum. Auf der Seite wird u.A. ein
> img angezeigt. In diesem Bild befindet sich ein Feld, in dem ein Text
> agezeigt werden soll.
>
> Wie definiere ich in html dass ein Text mit bestimmten, in Relation zum
> img Koordinaten angezeigt werden soll?

warum so kompliziert mit img und text?
mach ein div, das bild als background und den text in span/div als child 
node.
das innere div dann entweder über position oder mit margin 
positionieren.