css: relativ ( übereinander)

P

PowerBookGrafik

Aktives Mitglied
Thread Starter
Dabei seit
12.03.2005
Beiträge
814
Reaktionspunkte
5
Hallo erstmal:

habe folgendes problem:

habe 2 Layer .... und dann ein externes css.
und die beiden Layer sollen in einer tabelle, also in einer zelle, sich immer an dieser orientieren ...

Aber wenn ich die 2 Layer auf position: relativ habe, liegen sie nicht übereinander sondern untereinander , welches mir natürlich meine ganze Page zerreißt ?!

Hilfer:

css:

HTML: 
#Layer3 {
position:relative;

	width:300px;
	height:400px;
	z-index:1;
	left: 300px;
	top: 0px;
}
#Layer4 {
position:relative;
	width:50px;
	height:400px;
	z-index:2;
	left: 550px;
	top: 0px;
}
 
Wie rufst Du die beiden Layer auf? Mittels DIV-Tag?

Frank
 
DIV ist ein Block Element, d. h. nach einem DIV wird umgebrochen.

Nimm ein "display: inline;" mit in die CSS-Definition der beiden Layer mit rein:

PHP: 
#Layer3 {
position:relative;
    display: inline;
    width:300px;
    height:400px;
    z-index:1;
    left: 300px;
    top: 0px;
}

Ich habe Dir eine HTM-Datei mit angehängt, ist Dein CSS mit dem Inline ergänzt. Zu beachten ist noch, das Inline-Elemente keine Höhenangaben mehr interpretieren, sondern sich nur die Höhe "nehmen", die sie brauchen. Also nicht wundern, dass nur eine Zeile zu sehen ist.

Viel Spass,

Frank
 
position: relative erlaubt dir das Element relativ zu seiner ursprünglichen Position im Markup zu positionieren.

Was du brauchst ist position: absolute.

Auszug aus Selfhtml:
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
Zum Vergrößern anklicken....

d.h. du musst das übergeordnete Element (in dem die beiden divs enthalten sind) auch entsprechend mit einem position:absolute/relative versehen. Wenn dein Layout das erlaubt sollte es damit gehen.

Gruß

Stephan
 
die div tags sind in einer tabellenzelle eingebettet ? wie sage ich der eine pos: absolut ?
 
meinste sowas:

<html>
<style type="text/css"><!--

#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
border: 1px dotted #000000;
}

#inhalt2 {
position:absolute;
width:150px;
height:64px;
top:50%;
left:50%;
border: 1px dotted #000000;
}
--></style>

</head>
<body>
<div id="inhalt"><span class="Stil2">Nr 1 </span></div>
<div id="inhalt2"><span class="Stil2">Nr 2 </span></div>
</body>
</html>
Zum Vergrößern anklicken....
 
Zurück
Oben Unten