Здравствуйте дорогие читатели моего бложика, надеюсь среди вас есть
http://usabili.ru/labs/css_opacity_bug.html — посмотрите эту страницу, на ней видно что у абсолютно позиционированного элемента внутри с прозрачностью, не работает
Всё что говорится по этому поводу в спецификации css3: «If an element with opacity less than 1 is positioned, the ‘0
’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts». В упомянутых выше ссылках я не смогла найти точного ответа. Чтобы разобраться я отправила письма Яну Хигсону (hixie), который рекомендовал задать вопрос в лист рассылки www-style@w3.org, и Дэвиду Арону (dbaron), который ответил в топике багзиллы.
Ниже я публикую ответ этой загадки (пока в непереведённом виде):
Boris Zbarsky (:bz) 2010-06-20 20:22:13 PDT
The part you quoted is the part that matters. Non-auto computed values of opacity create a new stacking context, so the #div_with_link is at stacking level 1 in the stacking context created by #container, not in the root stacking context. Then the stacking context for #container is at level 0 in the root, as is the one for #content, which means the latter is on top (since it comes later in the document). This is all explained in the above-cited sections of CSS2.1, and is as clear and unambiguous as any part of CSS2.1 gets.
David Baron [:dbaron] 2010-06-20 20:22:49 PDT
The key parts here are: #content { z-index:-1; opacity: 0.7; } #container { z-index:1; opacity: 0.7; } #div_with_link{ position:absolute; z-index:1; opacity: 0.7; } and: <div id="container"> <div id="div_with_link"> NOT clickable </div> </div> <div id="content"> </div> What happens here is as follows: The z-index property on #content and #container should be ignored, since they're not positioned. The z-index:1 on #div_with_link works, since it is positioned. z-index defines the order of the stacking contexts within their containing stacking context. When #container has opacity < 1, it establishes a stacking context. This means that the z-index: 1 only lifts #div_with_link above other things in #container. However, when you change the opacity on #container to 1, it no longer establishes a new stacking context, and the z-index:1 on #div_with_link raises #div_with_link above everything else in the page. On the other hand, when you change the opacity on #content to 1, it no longer establishes a new stacking context, but #container still does establish a new stacking context. Things that establish a new stacking context (like 'z-index:0') are above things that don't. So, again, in this case, the link becomes clickable. Thus, our behavior is correct.
Комментарии: