Проблема позиционирования IE CSS
У меня есть разметка для всплывающего меню, которое работает в Firefox, но не в IE. Проблема в том, что всплывающее окно появляется под другими элементами и невосприимчиво к значению z-индекса. Полный пример работоспособности приведен ниже.
Теперь я знаю, что одно исправление - не позиционировать div как относительные, но я не могу этого сделать, потому что в реальном коде я использую scriptaculous, и он добавляет «position: relative», чтобы делать то, что ему нужно. делать. Кроме того, я не думаю, что это должно иметь значение.
Есть ли еще одно исправление, которое заставило бы этот код работать как для IE, так и для firefox?
Пример:
<!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" xml:lang = "en" lang = "en">
<head><title>IE Problem</title>
<style type = "text/css">
.mydiv{
position: relative;
background: yellow;
border: solid 1px black;
}
table{background:black;}
td.menu{background:lightblue}
table.menu
{
position:absolute;
visibility:hidden;
z-index:999;
}
</style>
<script type = "text/javascript">
function showmenu(elmnt){
document.getElementById(elmnt).style.visibility = "visible";
}
function hidemenu(elmnt){
document.getElementById(elmnt).style.visibility = "hidden";
}
</script>
</head>
<body>
<div class = "mydiv" onmouseover = "showmenu('one')" onmouseout = "hidemenu('one')">
<a href = "#">div one</a><br />
<table class = "menu" id = "one" width = "120">
<tr><td class = "menu"><a href = "#">Item 1</a></td></tr>
<tr><td class = "menu"><a href = "#">Item 2</a></td></tr>
</table>
</div>
<div class = "mydiv" onmouseover = "showmenu('two')" onmouseout = "hidemenu('two')">
<a href = "#">div two</a><br />
<table class = "menu" id = "two" width = "120">
<tr><td class = "menu"><a href = "#">Item 1</a></td></tr>
<tr><td class = "menu"><a href = "#">Item 2</a></td></tr>
</table>
</div>
</body>
</html>
Ответы 2
Если вы переместите ТАБЛИЦЫ за пределы DIV, это сработает. Надеюсь, это удовлетворит ваши потребности? Думаю, я бы тоже запутался, если бы я был DIV, и вы попросили меня Z-заказать что-то, что я содержал выше меня.
Z-index ограничен рамками родительского элемента, если у родительского элемента есть position: relative или position: absolute.
Решение для вашего примера - добавить style = "z-index: 2;" к первому «mydiv» и z-index: 1; ко второму.
Это ответ, с которым я согласился. Кажется, работает, хотя раскрывающееся меню немного мерцает в IE, когда я перемещаю мышь.
Проблема в том, что вы не могли знать, что меню является частью div. Я использую scriptaculous, чтобы разрешить перемещение div. Если кто-то перемещает div, я хочу, чтобы меню было вместе с ним. Возможно, я мог бы переместить меню при наведении курсора на div.