Что имеет больший приоритет: непрозрачность или z-index в браузерах?

Question

Я кодирую «всплывающее окно» в JavaScript, и мне попалась интересная вещь:

Темно-синий квадрат под всплывающим окном виден, хотя я ожидаю, что он будет скрыт. Всплывающее окно было добавлено после квадрата, поэтому оно должно быть сверху.

CSS opacity свойство квадрата военно-морского флота 0.3. Из того, что я пробовал, кажется, что каждое число из интервала (0,1) даст одинаковый результат. Если я изменю его на 1, то он будет вести себя как положено (то есть часть квадрата под всплывающим окном скрыта).

Я пытался установить для свойства z-index значение 10 для квадрата и 100 для всплывающего окна, но это ничего не меняет.

Что мне не хватает? Почему отображается часть квадрата?

Протестированные браузеры:

• Firefox 3.6.x
• Chrome 4

Answer 1

Это не ошибка и на самом деле как это должно работать . Это немного сбивает с толку, так как подробное описание стековых контекстов ничего не упоминает об этом. Тем не менее, модуль визуального форматирования ссылается на цветовой модуль , где можно найти эту конкретную информацию * (выделено мной):

Поскольку элемент с непрозрачностью меньше 1 составлен из одного закадровое изображение, содержание вне его не может быть наслоено в z-порядке между частями контента внутри него. По той же причине, реализации должны создавать новый контекст стека для любого элемента с непрозрачностью меньше 1. Если элемент с непрозрачностью меньше 1 не позиционированы, реализации должны рисовать слой, который он создает, в родительском контексте стекирования в том же порядке будет использоваться, если это будет позиционированный элемент с «z-index: 0» и ‘Opacity: 1’. Если позиционируется элемент с непрозрачностью меньше 1, свойство 'z-index' применяется, как описано в [CSS21], за исключением того, что «Auto» рассматривается как «0», поскольку новый контекст стека всегда создано. См. Раздел 9.9 и Приложение E [CSS21] для более подробной информации. информация о контексте укладки. Правила в этом параграфе не применять к элементам SVG, поскольку SVG имеет свою собственную модель рендеринга ([SVG11], Глава 3).

Answer 2

Это не проблема того, что opacity важнее z-index, а не z-index относительно их контекста стека (см. z-index в спецификации CSS2).

Другими словами, z-index значимы только в контексте позиционированного предка (будь то его относительный, абсолютный или фиксированный). Что вам нужно сделать, чтобы решить вашу проблему, это добавить position: relative; к элементу, который содержит как ваше всплывающее окно, так и ваш квадрат военно-морского флота, и, вероятно, добавить его z-index: 1;. Видя ваш скриншот, он, вероятно, будет верхним элементом, таким как div обертки.

Answer 3

Обходной путь для двух элементов, таких как div: добавьте непрозрачность 0.99 к верхнему элементу, и порядок обоих восстановится.

opacity: 0.99;

Answer 4

Пример кода может потребоваться для устранения этой проблемы.

Вы можете поместить overflow: hidden и, возможно, position: relative в DIV, который окружает все объекты редактора, чтобы заставить элементы рисоваться только внутри этого DIV, например:

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

В крайнем случае, вы также можете попробовать iframe между двумя элементами, чтобы остановить их просачивание.

Answer 5

Хотя @Guillaume Esquevin уже дал отличный ответ, я постараюсь расширить его, если кто-то проигнорирует, что такое стековый контекст (как я).

Как вы можете прочитать здесь , есть нечто, называемое стековым контекстом, которое относится к группе элементов, имеющих общий родительский элемент, которые перемещаются вместе в стеке. Примером может служить div и все его дочерние элементы.

Существует три способа создания контекста стекирования: в корне документа (элемент html), путем позиционирования родительского элемента и изменения непрозрачности родительского элемента до значения, меньшего 1.

Затем, если у вас есть div с непрозрачностью меньше 1, и вы хотите, чтобы какой-то элемент-элемент этого div появился позади него (и его дочерних элементов), вы можете создать новый контекст стека для такого элемента, установив его положение относительно или изменив его непрозрачность.

Answer 6

У меня была такая же проблема. Использование rgba вместо color / opacity решило мою проблему. Работая с LESS (в платформе Bootstrap), функция fade () сделала для меня преобразование.

Answer 7

Вы можете попытаться установить DIV всплывающего окна следующим образом, используя !important, чтобы стиль не менялся при применении нового стиля или класса:

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

Затем создайте новый класс CSS:

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

И добавить класс ко всем элементам в окне, например, так:

<input value="posx" class="some_class PopupElement"/>

Я предполагаю, что это сработает, поскольку нет никакого приоритета в применении атрибутов CSS ... насколько я знаю. =)