z-index
есть 2 блока, один из них select, другой table.
У table z-index=10, у select z-index=1, но не смотря на это select отображается поверх table.
Подскажите, как с этим можно бороться.
У table z-index=10, у select z-index=1, но не смотря на это select отображается поверх table.
Подскажите, как с этим можно бороться.
Цитата:
Originally posted by a__sergey
есть 2 блока, один из них select, другой table.
У table z-index=10, у select z-index=1, но не смотря на это select отображается поверх table.
Подскажите, как с этим можно бороться.
есть 2 блока, один из них select, другой table.
У table z-index=10, у select z-index=1, но не смотря на это select отображается поверх table.
Подскажите, как с этим можно бороться.
В IE select, input всегда имеют z-index=0. Есть несколько вариантов действий:
1. изменять свойство CSS display для блока, содержащего select.
2. разместить iframe под перекрывающим блоком.
3. изменить интерфейс таким образом, чтобы данная проблема не возникала :)
Вот пример использования iframe, проверено в IE6:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<iframe scrolling="no" frameborder="0" WIDTH="100%" HEIGHT=100%"
style="height:200px;width:200px;z-index: 2; position: absolute; top: 50px; left: 50px; ">
</iframe>
<div style="height:200px;width:200px;position:absolute;top:50px;left:50px;z-index:3;background-color:red">
<input type="text" value="верхний слой" style="width:180px;margin-top:100px">
z-index:3
</div>
<div style="height:200px;width:200px;position:absolute;top:100px;left:100px;z-index:1;background-color:lime">
<select type="text" value="..." style="width:195px;margin-top:100px">
<option selected="selected">нижний слой
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
</select>
z-index:1
</div>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<iframe scrolling="no" frameborder="0" WIDTH="100%" HEIGHT=100%"
style="height:200px;width:200px;z-index: 2; position: absolute; top: 50px; left: 50px; ">
</iframe>
<div style="height:200px;width:200px;position:absolute;top:50px;left:50px;z-index:3;background-color:red">
<input type="text" value="верхний слой" style="width:180px;margin-top:100px">
z-index:3
</div>
<div style="height:200px;width:200px;position:absolute;top:100px;left:100px;z-index:1;background-color:lime">
<select type="text" value="..." style="width:195px;margin-top:100px">
<option selected="selected">нижний слой
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
<option>.........
</select>
z-index:1
</div>
</body>
</html>
Если пользователь раскроет список в нижнем слое, то он все равно будет отображаться поверх верхнего слоя. Так что на время отображения верхнего слоя необходимо сделать его недоступным (disable).