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

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

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

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

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

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

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

Firefox 3.6.x
Chrome 4

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

opacity: 0.99;

Ответ 4

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

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

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

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

Ответ 5

Вы можете попробовать установить всплывающее окно 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... насколько я знаю. =)

Ответ 6

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