菜单被select遮住的解决方案_option 被挡住-优快云博客

本文介绍了一个使用HTML和JavaScript实现的简单示例，通过动态调整元素的 z-index 值来控制页面上 div、select 和 iframe 元素的层叠顺序。此示例演示了如何通过按钮点击事件改变这些元素的层级位置，帮助读者理解 z-index 的工作原理。

<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
div1.style.zIndex=text1.value;
select1.style.zIndex=text2.value;
getindexes();
}

function getindexes(){

text1.value=div1.style.zIndex;
text2.value=select1.style.zIndex;
text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">

Div
<input type="text" value="" id=text1 name=text1 ><p>

Select
<input type="text" value="" id=text2 name=text2><p>

IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1 style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1 >
<option>Option1
<option>Option2
<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>