Layer relativ positionieren

tommy-p · 17.07.2003, 23:36

Hallo,

ich hab hier ein Problem mit Layern. Erstmal den Quelltext dazu:

Code:

<div style="position:absolute; top:20; left:100; height:1300px; width:500px; z-index:1; background-color:red;">Layer 1</div>
<div style="position:relative; top:10; left:100; height:50px; width:500px; z-index:2; background-color:blue;">Layer 2</div>

Und zwar soll Layer 2 immer 10 Pixel unter Layer 1 erscheinen, egal wie groß Layer 1 ist. Nur ich scheitere irgendwie an diesem relative-Befehl.

Und wenn ich die Layer verschachtel,

Code:

<div style="position:absolute; top:20; left:100; height:1300px; width:500px; z-index:1; background-color:red;">Layer 1
<div style="position:relative; top:10; left:100; height:50px; width:500px; z-index:2; background-color:blue;">Layer 2</div>
</div>

Ist Layer 2 zwar relativ zu Layer 1, aber nicht zu dessen Ende.

Wie kann ich denn 2 Layer untereinander platzieren, unabhängig von der Größe des ersten Layers?

tommy-p

prefix · 18.07.2003, 08:44

na, da hast du mal ein grundsätzliches verständnisproblem!!! warum gibst du für die relativ positionierte ebene top- und left-werte an??? die haben dort nichts verloren.

hier ein beispiel, wie man eine ebene an einer anderen ausrichten kann - es ist gar nicht nötig, eine davon als absolut zu definieren - beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0; /* wir setzen mal die browserränder auf null */
}
#ebene1 {
	margin-left: 20px; /* hier benötigen wir die genauen abstände vom browserrand */
	margin-top: 20px; 
	width: 100px;
	height: 50px;
	background-color: yellow;
}
#ebene2 {
	margin-left: 20px; /* 20px vom linken browserrand */
	margin-top: 10px; /* 10px unter dem ELTERN-element !!! */
	width: 100px;
	height: 50px;
	background-color: red;
}
</style>
</head>

<body>
<div id="ebene1">ebene1</div>
<div id="ebene2">ebene2</div>
</body>
</html>

tommy-p · 18.07.2003, 13:11

Wunderbar, danke. So gehts. Bin aus DrWeb nämlich nicht so schlau geworden.

Eine Frage noch: wenn ich mehrere Layer habe, wie lege ich dann fest, wer wessen Elternelement ist? Durch den z-index? Oder durch die Reihenfolge im Quelltext?

tommy-p

prefix · 18.07.2003, 13:14

durch die reihenfolge - wobei hier der begriff "elternelement" von mir nicht ganz richtig war. sagen wir "vorheriges element"