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

Question

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

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

Cropped screenshot demonstrating strange stacking behavior

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

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

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

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

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

Firefox 3.6.x
Chrome 4

45

css z-index opacity

задан 0b10011 6 November 2013 в 20:29

3 ответа

Другие вопросы по тегам:

css z-index opacity

Похожие вопросы:

score 1 · Answer 1

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

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

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

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

score 0 · Answer 2

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

score 20 · Answer 3

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

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