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

Jump to last post
LeoBenz

LeoBenz

Neu angemeldet
Registriert
15 Juli 2013
Beiträge
3
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 (
You do not have permission to view link please Anmelden or Registrieren
) 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:
Expand Collapse Copy 
#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:
Expand Collapse Copy 
<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
 
Meinst du so?

HTML:
Expand Collapse Copy 
<!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>
 
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.
Zum Vergrößern anklicken....

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

Aber vielleicht hat Cyper ja schon die korrekte Lösung geschrieben ^^
 
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.
 
  • Thread Starter Thread Starter
  • #5
Hi Cyperfriend,

damit hat es funktioniert! Vielen Dank dafür! :)

Gruß,
Leo
 
Year, ich habe mal jemand in Sachen Webtechnik helfen können. Direkt rot im Kalender markieren :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben