[CSS] Problem mit Z-Index / Bildüberlappung

LeoBenz · 17 Juli 2013

Hallo!

Ich habe ein (wahrscheinlich) einfaches Problem mit 2 Bildern die ich überlappen möchte:

Ich möchte das ein Bild mittig zentriert und ein weiteres Bild dass unten rechts an der Ecke überlappt. Sie sollen immer zusammen kleben, egal wie groß man das Browserfenster zieht.
Ich habe mir bereits die Anleitung dazu auf SelfHTML angesehen (http://de.selfhtml.org/css/eigenschaften/positionierung.htm) und gegooglet aber ich bekomme es nicht so hin wie ich möchte, da die Bilder entweder falsch versetzt sind oder das eine Bild beim Verändern der Browsergröße 'wegwandert'.

Viele Hilfestellung über Google verweisen auf diese Zeilen:

HTML:

#unten
{
background-color:#efefef;
width:100px;
height:100px;
z-index:0;
}
#oben
{
background-color:#cdcdcd;
position:absolute;top:15px;left:20px;
width:50px;
height:50px;
z-index:1;
}

und

HTML:

<div id="unten"><img scr="" width="90" height="90" /></div>
<div id="oben"><img scr="" width="50" height="50" /></div>

Aber das mag so nicht funktionieren, es wäre schön wenn mir jemand dazu Hilfestellung geben könnte. Ich denke es liegt an den "position" Attributen, aber irgendwie komme ich damit nicht so klar.

Ich bedanke mich schonmal im voraus!

Gruß,
LeoBenz

Cyperfriend · 17 Juli 2013

Meinst du so?

HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Titel halt</title>
	</head>
		<style type="text/css">
			#container {
				width:90px;
				height:90px;
				position:absolute;
				top:50%;
				left:50%;
				margin-top:-45px;
				margin-left:-45px;
			}
			
			#unten {
				background-color:#efefef;
				width:100px;
				height:100px;
				z-index:0;
			}
			
			#oben {
				background-color:#cdcdcd;
				position:absolute;
				top:90px;
				left:90px;
				width:50px;
				height:50px;
				z-index:1;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="unten"><img scr="" width="90" height="90" /></div>
			<div id="oben"><img scr="" width="50" height="50" /></div>
		</div>
	</body>
</html>

Highrise · 17 Juli 2013

mit welchem Browser hast du das ganze denn gestestet?
Auf der SELTHTML Seite gibts für den FF einen Interessanten Hinweis:

Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2.1 umsetzen.

vielleicht also mal versuchen der hinteren Box den z-index:-1; zuzuweisen.

Aber vielleicht hat Cyper ja schon die korrekte Lösung geschrieben ^^

Cyperfriend · 17 Juli 2013

Hatte es mit Firefox (22) getestet, gerade aber nochmal mit dem Internet Explorer (9) (Dam, wieso ist hier nicht V10 installiert?)
Funktioniert. Ich bin mir nur nicht sicher, ob es das ist was der TE wollte, hatte es aber so verstanden.

LeoBenz · 18 Juli 2013

Hi Cyperfriend,

damit hat es funktioniert! Vielen Dank dafür!

Gruß,
Leo

Cyperfriend · 18 Juli 2013

Year, ich habe mal jemand in Sachen Webtechnik helfen können. Direkt rot im Kalender markieren

[CSS] Problem mit Z-Index / Bildüberlappung

LeoBenz

Neu angemeldet

Cyperfriend

Der ohne Avatar

Highrise

..Migration completed

Cyperfriend

Der ohne Avatar

LeoBenz

Neu angemeldet

Cyperfriend

Der ohne Avatar