relative und z-index

halskrause · 05.03.2010, 17:38

Hi. Ich habe ein kleines Problem mit der relativen Positionierungseigenschaften von Elementen. In dem Fall sind es images...

So soll es sein:

Ich habe es so versucht ....

PHP-Code:

  
<style type="text/css">
.cont {
    height: 150px;
    width: 320px;
}
.cont .front {
    position: relative;
    left: -320px;
    z-index: 1;
}
.cont .back {
    position: relative;
    z-index: 0;
}
</style>
</head>
<body>
<div class="cont">
<img src="images/Unbenannt-1.jpg" class="back" />
<img src="images/mask1.png" class="front"/>
</div>

... zu lösen. Leider ohne Erfolg.
Absolute Pos. klappt zwar, hilft mir aber nicht weiter. Ich muss es "relativ" lösen.

Fra

nikosch · 05.03.2010, 17:40

Zitat:

Ich muss es "relativ" lösen.

Dann mach das doch. Wie das geht steht bei selfhtml.

halskrause · 05.03.2010, 21:04

Ich habe es nun gelöst... Wobei ich es nicht verstehe, warum bei meinem div meine die poitionierung auf relative gestellt werden muss...

PHP-Code:

  .cont {
    height: 150px;
    width: 320px;
    float: left;
    position: relative;
}
.cont .front {
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
}
.cont .back {
    z-index: 0;
}
</style>

nikosch · 05.03.2010, 21:15

Auch das steht bei selfhtml.

Zitat:

Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.

Manko10 · 05.03.2010, 21:20

Wobei die SelfHTML-Erklärung ungenau ist. Dort steht, dass es nur mit einer Angabe von position funktioniert. Das ist aber nicht ganz korrekt. Korrekt wäre zu schreiben, dass es nur mit einer position-Angabe ungleich static funktioniert (was der Standardwert ist, wenn nichts angegeben wurde).

nikosch · 05.03.2010, 21:48

Ähhhhhhhhm.

Zitat:

Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.

Manko10 · 05.03.2010, 21:51

Ähhhhhhhhm. SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Da steht eindeutig:

Zitat:

Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position.

Mehr nicht und das ist ungenau bzw. nicht richtig. Dein Beispiel steht dann irgendwo bei position, aber da gucke ich ja nicht zwangsläufig nach.

nikosch · 05.03.2010, 21:53

Ich schon. Darum gehts doch auch in diesem Thread?!

Manko10 · 05.03.2010, 21:58

Nö, eigentlich nicht. Es geht primär um z-index, also schaut man i.d.R. auch bei z-index nach. Da der TE schon relative genannt hat, gehe ich davon aus, dass er die Werte für position einigermaßen kennt und somit nicht zwangsläufig bei position nachschaut, denn bei z-index steht ja schon

Zitat:

Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position.

Sollte der TE jetzt schon einmal vom Hörensagen etwas von static gehört haben, könnte er sich ja auch denken, dass er nur static angeben muss, da dann ja eine Angabe gemacht ist. Dass es dann immer noch nicht funktioniert, wäre dann ziemlich verwirrend. Deshalb mein Hinweis.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Datenfelder mit Index, Datenbankabgleich	Herr Jeh	Datenbanken	2	08.02.2010 05:01
MQSL Index aus a+b = index	Flot	Datenbanken	10	29.01.2010 09:45
[Erledigt] MYSQL INDEX Frage 700.000 Datensätze ?	c01001	Datenbanken	2	20.04.2009 13:55
php datei löschen	djscaleo	PHP Tipps 2008	21	14.11.2008 15:47
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
Notice: Undefined index	Kein Genie	PHP Tipps 2008	5	23.04.2008 17:40
Prototype Ajax Array Datenmüll	notyyy	HTML, Usability und Barrierefreiheit	2	08.04.2008 10:57
Array index updaten	obi	PHP Tipps 2008	4	28.11.2007 15:08
Index vom Array zurücksetzen	kampfnickel	PHP Tipps 2007	6	08.01.2007 17:24
ftp account erstellen in confixx umgebung		PHP-Fortgeschrittene	5	15.02.2006 20:41
mysql_num_row unde Index bleibt trotzdem 0 in der DB	nieselfriem	PHP Tipps 2005-2	7	30.07.2005 17:30
2 verschachtelte while Schleifen. Großes Performanceproblem		Datenbanken	3	30.05.2005 12:52
Undefined index		PHP Tipps 2005	5	05.02.2005 14:57
[Erledigt] Elementare Frage: Schneller durch Index? - Bin ratlos!		Datenbanken	1	16.12.2004 05:23
Undefined index:		PHP Tipps 2004	6	15.09.2004 12:00

05.03.2010, 17:38
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 755	relative und z-index Hi. Ich habe ein kleines Problem mit der relativen Positionierungseigenschaften von Elementen. In dem Fall sind es images... So soll es sein: Ich habe es so versucht .... PHP-Code: `<style type="text/css"> .cont { height: 150px; width: 320px; } .cont .front { position: relative; left: -320px; z-index: 1; } .cont .back { position: relative; z-index: 0; } </style> </head> <body> <div class="cont"> <img src="images/Unbenannt-1.jpg" class="back" /> <img src="images/mask1.png" class="front"/> </div>` ... zu lösen. Leider ohne Erfolg. Absolute Pos. klappt zwar, hilft mir aber nicht weiter. Ich muss es "relativ" lösen. Fra


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.03.2010, 21:04
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 755	Ich habe es nun gelöst... Wobei ich es nicht verstehe, warum bei meinem div meine die poitionierung auf relative gestellt werden muss... PHP-Code: `.cont { height: 150px; width: 320px; float: left; position: relative; } .cont .front { position: absolute; z-index: 1; left: 0px; top: 0px; } .cont .back { z-index: 0; } </style>`

05.03.2010, 21:20
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.425 PHP-Kenntnisse: Fortgeschritten	Wobei die SelfHTML-Erklärung ungenau ist. Dort steht, dass es nur mit einer Angabe von position funktioniert. Das ist aber nicht ganz korrekt. Korrekt wäre zu schreiben, dass es nur mit einer position-Angabe ungleich static funktioniert (was der Standardwert ist, wenn nichts angegeben wurde). __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

05.03.2010, 21:53
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.248 PHP-Kenntnisse: Fortgeschritten	Ich schon. Darum gehts doch auch in diesem Thread?! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --