zwei Bilder übereinander legen

mariusk · #1 (**permalink**) 20.12.2013, 19:42

Ich möchte in einem div zwei Bilder anzeigen, dass eine links und das andere rechts ausgerichtet. Beide Bilder sind größer als die Gesamtbreite des div. Die Bilder sollen auf gleicher Höhe nebeneinander bzw. aufeinander liegen. Das zweite Bild soll nicht über die div-Breite hinausgehen, sodern am rechten Rand ausgerichtet werden und somit das erste Bild teilweise überlagern.

Im Moment werden beide Bilder nur untereinander angezeigt. Hier ein vereinfachtest Beispiel:

HTML-Code:

  <body>
  <div style="width:250px; height:50px">
  
  <img src="bild1.gif" style="width:220px; height:25px; position:relative; z-index:1;">
  <img src="bild2.gif" style="width:80px; height:25px; position:relative; z-index:2;" align=right>

  </div>

  </body>

Gibt es dafür eine Lösung?

Manfred62 · #2 (**permalink**) 20.12.2013, 20:05

z.B. so:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.wrap {
		width: 570px;
		height: 150px;
		position: relative;
		border: 1px solid #ccc;
	}
	img {
		position: absolute;
	}
	.img-a {
		top: 0;
		left: 0;
		z-index: 1;
	}
	.img-b {
		bottom: 0;
		right: 0;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<img class="img-a" src="http://placehold.it/350x150/0eafff/ffffff.png" alt="" width="350" height="150">
		<img class="img-b" src="http://placehold.it/350x150/FF8000/ffffff.png" alt="" width="350" height="150">
	</div>
</body>
</html>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder über einander legen	adl-solutions	CSS	2	14.09.2013 23:39
Hintergrund wird nicht angezeigt	maxx	CSS	6	14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht!	maxx	CSS	5	14.10.2012 07:21
Bilder übereinander auswählen	Felix1984	CSS	0	19.03.2010 23:30
Bilder übereinander	Marco D.	CSS	2	08.09.2007 18:14