14 июня 2010 :Особенность свойства opacity в CSS

Здравствуйте дорогие читатели моего бложика, надеюсь среди вас есть css-профессионалы, поскольку у меня есть любопытная задача. Я обнаружила следующую реализацию свойства opacity в современных браузерах:

http://usabili.ru/labs/css_opacity_bug.html — посмотрите эту страницу, на ней видно что у абсолютно позиционированного элемента внутри с прозрачностью, не работает z-index относительно другого элемента с прозрачностью. Т. е. он оказывается под ним, и соответственно красная ссылка в нём не доступна для клика. Красная ссылка в этом примере обрабатывается так как будто имеет z-index:0 или даже меньше, хотя это не так. Причём, при убирании свойства opacity у любого из элементов, или при перемещении элемента со ссылкой из прозрачного — ссылка становится рабочей.
Всё что говорится по этому поводу в спецификации css3: «If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘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.