z-index не работает

streloc

Новичок
z-index не работает

<style type='text/css'>
#B {position:absolute; z-index:2; left:60px; top:60;}
#C {position:absolute; z-index:1; left:70px; top:60;}
</style>
</head>
<body>
<div id='B'>
<input type="reset">
</div>
<div id='C'>
<select name="">
<option>11111111111111111
</select>

Вопрос: Почему список select имея более низкий z-index всё равно находится выше кнопки. И как сделать чтобы всё таки select был под кнопкой?
 

SelenIT

IT-лунатик :)
Эту тему неоднократно поднимали на форуме www.xpoint.ru.

Сводилось все к тому, что select - не обычный HTML -элемент, а по сути ActiveX control. Поэтому CSS на него практически не действует.

Основных вариантов выхода три:
1) строить дизайн так, чтоб SELECT не надо было ничем перекрывать;
2) если надо отобразить поверх SELECT-а всплывающий слой - в момент показа этого слоя делать слой с SELECT-ом невидимым;
3) делать искусственную замену SELECT-у на слоях и javascript.
 

streloc

Новичок
Вот нашёл где то
<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
.php { color: white; background-color: darkblue; }
.python { color: white; background-color: lightblue; }
#layer1 {
position: absolute;
z-index: 10;
left: 0px;
visibility: hidden;
}
#layer2 {
position: absolute;
z-index: 5;
left: 0px;
}
</STYLE>
<SCRIPT>
function showLayer (id) {
if (document.layers)
document[id].visibility = 'show';
else if (document.all)
document.all[id].style.visibility = 'visible';
else if (document.getElementById)
document.getElementById(id).style.visibility = 'visible';
}
function hideLayer (id) {
if (document.layers)
document[id].visibility = 'hide';
else if (document.all)
document.all[id].style.visibility = 'hidden';
else if (document.getElementById)
document.getElementById(id).style.visibility = 'hidden';
}
function clipSelect () {
if (document.layers) {
document.layer2.oldClipWidth = document.layer2.document.width;
document.layer2.clip.width = 0;
}
else if (document.all)
document.all.layer2.style.clip = 'rect(auto 0px auto auto)';
}
function unclipSelect () {
if (document.layers)
document.layer2.clip.width = document.layer2.oldClipWidth;
else if (document.all)
document.all.layer2.style.clip = 'rect(auto auto auto auto)';
}
function init () {
if (document.layers)
document.layer1.onmouseout = function () {
hideLayer(this.id);
unclipSelect();
};
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<A HREF="javascript: void 0"
ONMOUSEOVER="showLayer('layer1'); clipSelect();">
Knowledge Bases
</A>
<BR>
<DIV ID="layer1"
ONMOUSEOUT="if (document.all) {
if (!this.contains(event.toElement)) {
hideLayer(this.id);
unclipSelect();
}
}
else if (document.getElementById) {
window.tid = setTimeout('hideLayer(\'' + this.id
+ '\')', 20);
}"
ONMOUSEOVER="if (document.getElementById)
clearTimeout(window.tid);"
>
<TABLE BORDER="0" height="150" width="200">
<TR>
<TD CLASS="javascript">
jklkjljklkjlkjljk
</TD>
</TR>
</TABLE>
</DIV>
<DIV ID="layer2">
<FORM NAME="formName">
<SELECT NAME="aSelect" WIDTH="150" STYLE="width: 150px;">
<OPTION>Kibo
<OPTION>Kibology
<OPTION>Xibology
</SELECT>
</FORM>
</DIV>
</BODY>
</HTML>
 

SelenIT

IT-лунатик :)
Насколько я понял, это реализация 2-го варианта из моего предыдущего поста?

Можно было найти и чего получше. document.all.идентификатор - пережиток 4-го эхплорера, не поддерживается почти нигде кроме IE. Универсальная и стандартная замена - document.getElementById("идентификатор").

Вообще, ИМХО, хорошая статья (в т.ч. по работе со слоями) www.kruglov.ru/articles/crossbrowserdhtml/
 
Сверху