Непрозрачность свойство и падение меню

-1

<body> 
 
    <div id="header"></div> 
 

 
    <div id="mainArea"> 
 
    <div class="container page"> 
 
     /* Paragraph here */ 
 
    </div> 
 
    </div> 
 
</body>

Я намеревался иметь меню падения на «заголовок» и есть страница, которая, как это [.

Но после этого, когда я изменил непрозрачность «mainArea» до 0,8, оказалось, что это [.

mainArea теперь находится на верхней панели навигации в header. Я попытался изменить свой z-индекс, но ничего не изменилось.

Update:

Я уже читал о позиционном контексте, вы можете прочитать его более подробно на MDN The stacking context.

Единственное, что я ошибся тогда, это то, что я думал, что z-index унаследован, но это оказалось не так. Тем не менее, когда я пытался применить его на детском позиционированном элементе, он работал.

Надеюсь, это поможет кому-то решить эту проблему. Рекомендуемые ссылки других также очень полезны для меня.

источник

2016-07-03 elPsyChris

Моя проблема окончательно решена с помощью rgba() в фоновом цвете вместо использования непрозрачности. Изменение свойства непрозрачности элемента, по-видимому, создает изменение в порядке укладки в моем случае. – elPsyChris

У меня была такая же проблема раньше. Я не знаю фактической причины, но пока вы определяете атрибут непрозрачности в div, содержащем меню, z-index не работает.

Удалить непрозрачности и попробовать Z-индекс, не уверен,

источник

2016-07-03 10:26:23

Да, спасибо! Я пробовал, но кажется, что это не работает в моем случае. – elPsyChris

Это может вам помочь. http://stackoverflow.com/questions/7490146/z-index-relative-or-absolute –

Спасибо за вашу помощь – elPsyChris

Вам нужно добавить margin-top к MAINAREA.

.mainArea{ 
    margin-top:10px; // choose whatever value suits you. 
}

Также удалите z-индекс и непрозрачность, так как они не имеют никакого отношения к проблеме.

источник

2016-07-03 10:26:50

Это сработало, но потом я подумал, что есть какое-то решение, чтобы получить «mainArea» за панель навигации или нет, потому что он, похоже, находится поверх моего навигатора, поэтому я не могу навести указатель мыши на элемент за ним. – elPsyChris

Просто увеличьте значение margin-top, и оно спустится. Зачем вы хотите переместить его? –

Поскольку дизайн, который я хочу, похож на первый рисунок выше, и я изменил свойство непрозрачности, чтобы увидеть фон, но он закрыл меню перетаскивания и вызвал у меня проблему. – elPsyChris

Непрозрачность свойство и падение меню

ответ

Смежные вопросы