GoldenLine
Zaloguj się

konto usunięte

Temat: opacity psuje z-order?

natknąłem się na taki problem z przeźroczystością, jest div1, a pod nim div2 (pod, nie wewnątrz div1), do tego css:

css


#div1 {

	width: 300px;

	height: 300px;

	background-color: red;

	opacity: 0.5;

}



#div2 {

	width: 250px;

	height: 250px;

	background-color: black;

	margin-top: -300px;

}


Jeśli pominę opacity, to efekt jest taki jak ma być, czyli czarny kwadrat na większym, czerwonym. Po dodaniu opacity nie wiedzieć czemu zamiast spodziewanego czarnego kwadratu na półprzeźroczystym czerwonym dostaje oba półprzeźroczyste.. po sprawdzeniu kliknięcie na nich zaznacza w firebugu div1, czyli jakby div1 był nad div2, czyli odwrócił się z-order?. Dodanie w css jawnego z-order nie rozwiązuje problemu. Tak jest w FF3/Safari/Chrome. W Operze i IE(po zamianie opacity na filter:alpha(opacity=50) ) jest o dziwo tak jak wydaje mi się powinno być, czyli czarny kwadrat na półprzeźroczytym czerwonym.

Googlanie opacity daje tylko opisanie zachowania opacity w elementach podrzędnych, ale tu są siblingi. Czy umknęło mi coś ze specyfikacji? Które przeglądarki mają tu rację i jak zrobić, żeby w FF/Safari/Chrome bylo tak jak w Operze i IE?Krzysztof Kawa edytował(a) ten post dnia 06.01.09 o godzinie 01:54
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?



#div1 {

	width: 300px;

	height: 300px;

	background-color: red;

	opacity: 0.5;

	filter: alpha(opacity = 50);/* For IE */

	zoom: 1;/* For IE */

	position: relative;

	top: 0;

	z-index: 9;}



#div2 {

	width: 250px;

	height: 250px;

	background-color: black;

	position: relative;

	top: -300px;

	z-index: 999;

}
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?

Dzięki, działa.

Ciekawość mnie jednak bierze. W zasadzie wystarczy zamienić margin-top na relative position i top, ale czemu to się inaczej zachowuje w kwestii kolejności? i to w FF, gdyby to był IE to nawet nie pytałbym..
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?

Wcześniej pisałeś o 'z-order' - sposobem na wymuszenie tego zjawiska w CSS jest użycie 'z-index', a podstawą dla tego jest określenie dla danego elementu pozycji (stąd 'position: relative')...
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?

No tak, myślałem o z-index, napisałem z-order, ale w swoim kodzie miałem dobrze(podpowiadanie w edytorze ratuje takie sytuacje:) )

Po zamianie tego margin-top na top i relative jawny z-index nie jest już potrzebny, bo nagle zachowuje się to tak jak powinno, TO mnie dziwi.
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?

Kontenery nie są zagnieżdżone jeden w drugim - tak więc każdy kolejny kontener w strukturze HTML będzie 'warstwę wyżej' (z-index każdego kontenera ma wartość domyślną, tzn. 'auto'). Co więcej - w tym konkretnym przypadku pierwszemu kontenerowi nie trzeba przypisywać 'position:relative'. Wystarczy, że każdy kolejny kontener będzie się odnosić do swego poprzednika ('position:relative')...
Link do wypowiedziLink

konto usunięte

Temat: opacity psuje z-order?

Waldek Mazurek:
Kontenery nie są zagnieżdżone jeden w drugim - tak więc każdy kolejny kontener w strukturze HTML będzie 'warstwę wyżej' (z-index każdego kontenera ma wartość domyślną, tzn. 'auto'). Co więcej - w tym konkretnym przypadku pierwszemu kontenerowi nie trzeba przypisywać 'position:relative'. Wystarczy, że każdy kolejny kontener będzie się odnosić do swego poprzednika ('position:relative')...
Dokładnie tak, to rozumiem. Natomiast wydawało mi się, że elementy, które nie posiadają zdefiniowanego position są stackowane w kolejności w jakiej są w kodzie. Tak to działa przynajmniej bez opacity. Wygląda na to, że bez position FF grupuje elementy bez i z opacity i te drugie wstawia później, ale chyba nie powinno tak być? Opera zachowuje się tu chyba sensowniej wrzucając je do jednego worka.
Link do wypowiedziLink
Paweł Piskorz

Paweł Piskorz koder HTML/CSS

Temat: opacity psuje z-order?

Krzysztof Kawa:
Natomiast wydawało mi się, że elementy, które nie posiadają zdefiniowanego position są stackowane w kolejności w jakiej są w kodzie. Tak to działa przynajmniej bez opacity.

Tak też powinno być.
Wygląda na to, że bez position FF grupuje elementy bez i z opacity i te drugie wstawia później, ale chyba nie powinno tak być?

Jest prawidłowo:
http://www.w3.org/TR/2008/WD-css3-color-20080721/#tran...
"If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’."Paweł Piskorz edytował(a) ten post dnia 08.01.09 o godzinie 15:44
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Zmiana opacity na png-24 ->...




Wyślij zaproszenie do
Anuluj