| |
|
|
| | Здравствуйте!
У меня вот такой код страницы:
<html>
<head>
<style type='text/css'>
<!--
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Это строка необходима для IE5.x/Win */
}
a.tooltip:hover span {
display:block;
position:absolute;
top:0px;
left:75px;
width:200px;
padding:10px;
border:1px solid #555;
background:#ffffcc;
color:#000;
text-decoration:none;
font:13px/15px arial,sans-serif;
/* прозрачность: */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* IE 5.5+*/
-moz-opacity: 0.8; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.8; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.8; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>
<a href='tree.php?id=$r[0]' class='tooltip'>
<div style="position:relative;z-index:0"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
<span style='z-index:1;'>
Проблема с z-index в IE!
</span>
</a>
</td>
<td>
<a href='tree.php?id=$r[0]' class='tooltip'>
<div style="position:relative;z-index:0"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
<span style='z-index:1;'>
Проблема с z-index в IE!
</span>
</a>
</td>
</tr>
</table>
</body>
</html>
|
Всплывающая подсказка должна быть поверх обоих картинок. В Мозилле все работает, а в IE подсказка прячется под вторую картинку... Может я что-то не так сделал? | |
| |
|
|
| |
|
|
| |
для: Воффка
(17.03.2007 в 18:03)
| | | попробуйте для a.tooltip:hover span { z-index:3
дело может быть и в самой конструкции a.tooltip:hover span {
обычто после события ничего не пишут. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.03.2007 в 19:43)
| | | Попробовал - не получилось... Конструкция тут вроди непричем, потому что в таком коде:
<table>
<tr>
<td valign="top">
<a href='tree.php?id=$r[0]' class='tooltip'>
<div style="position:relative;z-index:0"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
<div style="position:relative;z-index:1; top:-60; left:50"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
</a>
</td>
<td valign="top">
<a href='tree.php?id=$r[0]' class='tooltip'>
<div style="position:relative;z-index:0"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
</a>
</td>
</tr>
</table>
|
,где посерединке между двумя картинками вставляется третья, она опять прячется под вторую в IE и все правильно отображается в Мозилле и в Опере.
В чем же все-таки дело? | |
| |
|
|
| |
|
|
| |
для: Воффка
(18.03.2007 в 01:00)
| | |
<table>
<tr>
<td style = "position: relative; z-index: 1">
<a href='tree.php?id=$r[0]' class='tooltip'>
<div style = "position: relative; z-index: 1"><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
<span style = "z-index: 1">
НЕТ проблем с z-index в IE!
</span>
</a>
</td>
<td>
<a href='tree.php?id=$r[0]' class='tooltip'>
<div><img src="http://img.yandex.net/i/logo-big-txt.gif" border='0'></div>
<span>
ЕСТЬ проблема с пониманием принципов позиционирования!
</span>
</a>
</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: CNT
(18.03.2007 в 01:52)
| | | Пояснение к вышенаписанному коду (если кому надо, конечно):
1. в MSIE для любого элемента по умолчанию position: static.
2. в других браузерах по умолчанию position: relative, а значения static просто нет.
3. z-index работает во всех браузерах только для элементов с position: absolute или position: relative. При одном исключении (см. п.5 ниже).
4. кроме этого необходимо помнить (знать), что во всех браузерах при одинаковых неотрицательных значениях z-index для нескольких элементов (например, z-index: 2), элемент, прописанный в коде ниже (или созданный DOM-методами позже) будет иметь значение z-index: 2+, т.е. будет находиться в чуть более "высоком" слое, чем прописанные в коде ранее (или созданные DOM-методами ранее).
5. предыдущее ("четвёртое") правило в MSIE действует (как это ни странно) и для элементов со значением позиции по умолчанию - position: static. Потому как во всех браузерах (в том числе и в MSIE) по умолчанию элементы будут иметь значение z-index: auto, которое фактически чуть больше нуля (т.е. z-index: 0+) но "ненулевое". И каждый ранее обработанный парсером элемент будет всё больше приближаться к нулю,... но никогда его не достигнет.
PS. Чтобы легче было понять, приведу пример с вышенаписанным кодом.
Положим, надо добавить в строку таблицы ещё одну (третью) ячейку.
Чтобы всё работало корректно, надо новую (третью) ячейку прописать с такими же стилями, как сейчас у первой, но изменить значение индекса на z-index: 0. (вспоминаем написанное в п.5 - фактический "ноль" будет всегда ниже, чем z-index: auto)
Соответственно, стили первых двух ячеек оставляем без изменения.
Если кто-то предложит иной вариант - в двух первых ячейках всё оставляем по-прежнему, но третьей ячейке прописываем z-index: -1, то он ошибётся (не заметил слово неотрицательное в п.4) - отрицательные значения допустимы, но при равных отрицательных значениях z-index каждый обработанный парсером позже элемент будет находиться, наоборот, в более "низком" слое, чем предыдущие. И <span> в третьей ячейке будет "ниже" картинки:-)
PS2. Вот такая вот "высшая математика" с пределами реализована разработчиками. :-)
Но, в принципе, она вполне логична... если разобраться и понять, конечно. | |
| |
|
|
| |
|
|
| |
для: CNT
(18.03.2007 в 09:27)
| | | Спасибо=)
Значит, если мне нужно добавить n ячеек, то для каждой из них придется прописывать z-index от n у первой до 0 у последней? | |
| |
|
|
| |
|
|
| |
для: Воффка
(18.03.2007 в 11:41)
| | | Если в каждой ячейке будет аналогичная конструкция с "всплывающей" подсказкой, то тогда, в общем, да... придётся писать.
При этом для N ячеек в самой первой z-index будет равен (N-2), потому как в последней - 0, а в предпоследней можно оставить z-index по умолчанию (т.е. не прописывать вовсе ни position, ни z-index) | |
| |
|
|
| |
|
|
| |
для: CNT
(18.03.2007 в 12:32)
| | | Уважаемый CNT, не могли бы вы взглянуть на это: http://softtime.ru/forum/read.php?id_forum=1&id_theme=33973&page=3 и дать пару советов по данному вопросу. Потому как прочитав ваше сообщение, понял, в зет-индексах я не шарю совсем!)) | |
| |
|
|
