Forum PHP.pl > z-indexy warstw

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

joytec

12.03.2010, 14:31:10

Czesc.

Mam pytanie odnosnie kolejnosci warstw warstw.

[HTML] pobierz, plaintext 
<div id="czerwony" style="position:relative;height:100px;width:50px;overflow:auto;z-index:1;background-color:red;">
<div id="zielony" style="position:absolute; top:0; left: 0; width:100px; height:200px; z-index:2;background-color:green;">test2</div>
</div>
[HTML] pobierz, plaintext

jesli nadam teraz divovi wewnetrznemu(zilonemu) top: 300px i left:300px nie widze go poza czerwonym zewnetrznym divem. Zalezy mi na wlasnie takim ukladzie divov

[HTML] pobierz, plaintext 
<div id="czerwony" style="position:relative;height:100px;width:50px;overflow:auto;z-index:1;background-color:red;">
<div id="zielony" style="position:absolute; top:300px; left:300px; width:100px; height:200px;z-index:2;background-color:green;">test2</div>
</div>
[HTML] pobierz, plaintext

Czy mozna nadac tak porytety aby zielony div byl widoczny poza czerwonym

Moglbym prosic o jakies sugestie

erix

12.03.2010, 14:58:23

Im większy z-index, tym "bliżej Ciebie" jest warstwa.

joytec

12.03.2010, 15:04:29

nadawalem wewnetrzej wartwie trzy cyfrowy index

i dalej jej nie widze. czy wewnetrzej warstwie mozna nadac wiekszy -index od zewnetrzej no zeby bylo ja widac oczywiscie po pozycjonowaniu

zegarek84

7.04.2010, 22:24:10

eh - temat nie rozwiązany - choć stary to odpowiem gdyż komuś może się przydać...

zły temat gdyż tu nie chodziło Ci o z-index - no ale skąd mogłeś wiedzieć

dokładniej to wywal deklarację overflow w pierwszym lub daj visible.
Tutaj masz to co chciałeś bez z-index (a i co do z-index rzucę słówko - z nim jest jak z pozycjonowaniem, tzn. z-index jest względem "wy pozycjonowanego" przez z-index rodzica):

[HTML] pobierz, plaintext 
<html>
<body>
<div id="czerwony" style="position:relative;height:100px;width:50px;background-color:red;overflow:visible;">
	<div id="zielony" style="position:absolute; top:300px; left:300px; width:100px; height:200px;background-color:green;">test2</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.