ASGAlex

Спасибо, буду думать...

В таком случае картинка падает под полупрозрачный div и становится от этого белёсой: У меня всё утыкается в эту прозрачность, так бы проблем меньше было. Кроме того, картинка становится от этого некликабельной, не получится её увеличить. Это уже недопустимая жертва.

На странице надо отобразить всплывающую подсказку средствами CSS, причём чтобы она была поверх всего остального контента. Казалось бы, z-index в зубы - и вперед! Но не тут-то было... Примерная структура проблемной страницы такова: <img id="engrave" ...........> <div id="article" > <p> Всякий текст... <span class="title">**<em>Текст подсказки.<i></i></em></span> </p> </div> CSS в общем виде такой: #engrave { margin: 10px; position: relative; z-index: 1; cursor: pointer; } #article { margin: 10px; opacity: 0.7; background-color: #ffffff; float: none; } .title{ position:relative; color:#06F; } .title em{ display:block; position:absolute; padding:3px 5px; bottom:22px; right:0; width: 256px; /*Дальше всякие украшательства*/ } Примерно так. Страница целиком лежит здесь и глюк там виден во всей своей красе. Всплывающая подсказка не отображается поверх картинки, а частично прячется под ней. Да, подсказка в настоящий момент не очень-то и всплывающая, я специально это отключил для удобства отладки. Проблема легко решается, если картинку поместить внутрь <div id="article">, однако тогда она станет полупрозрачной, чего мне не надо. Вот и приходится позиционировать её с z-index:1 отдельно. Но, поскольку div теперь оказывается под картинкой, а всплывающая подсказка - дочерний объект, то она тоже лежит под изображением. z-index не помогает вытащить подсказку наверх. Подозреваю, что он тут вообще бессилен. Собственно, что делать в такой ситуации? Можно ли решить с помощью z-index? Или есть способ отменить наследование прозрачности у изображения, вставленного внутрь прозрачного div'a? Прошу вашего совета...