Всплывающая CSS-подсказка поверх всего контента.

ASGAlex · March 31, 2010

На странице надо отобразить всплывающую подсказку средствами 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? Прошу вашего совета...

Edited March 31, 2010 by ASGAlex

psywalker · April 1, 2010

Попробуй так сделать

ASGAlex · April 1, 2010

В таком случае картинка падает под полупрозрачный div и становится от этого белёсой:

У меня всё утыкается в эту прозрачность, так бы проблем меньше было.

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

Edited April 1, 2010 by ASGAlex

psywalker · April 1, 2010

Изначально вёрстка неверная,нужно было делать по человечески.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">

	*{ margin: 0; padding: 0;}

		div.wrap { margin: 50px; border: 1px solid #000; padding: 20px; overflow: hidden;}
			div.img { float: left; width: 200px; height: 300px; margin-right: 20px; background: red;}
			div.wrap p { margin-left: 220px; border: 1px solid #666;}

			div.wrap a { 
				position: relative;
				display: block; 
				width: 50px; 
				height: 20px; 
				border: 1px solid green;
			}
				div.wrap a:hover span {
					position: absolute;
					width: 200px;
					height: 30px;
					background: #0F0;
					left: -80px;
					top: 0;

				}

</style>
</head>

<body>

	<div class="wrap">
		<div class="img"></div>
		<p><a href="#"><span></span></a>kjsdfksfjkdfdskl dkjfk dfklsdfksdlkfj fklfjksdjflkjfklfjkls fkslajfsjfksdjfsjf lksdjflksdjflksjf ksdjfklsjdfkldsfsadjf</p>
	</div>

</body>
</html>

Justnewone · April 1, 2010

#article {
  position:relative;
  z-index:2;
}

psywalker · April 1, 2010

#article {
  position:relative;
  z-index:2;
}

Я делал похожую вещь, ему она не подходит.

ASGAlex · April 1, 2010

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

Justnewone · April 1, 2010

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

Я лично в этой ситуации сделал бы полупрозрачный фон 1-пиксельным пнг, никаких опасити - все хорошо.

Sign In

Всплывающая CSS-подсказка поверх всего контента.

Question

ASGAlex

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

ASGAlex

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

ASGAlex

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information