让你的DIV位于在下拉框的上面

来源：互联网发布：论文代笔淘宝上怎么搜编辑：程序博客网时间：2024/05/01 20:34

我们在作B/S开发的时候经常会遇到DIV层被下拉框遮挡的时候，这让我们很苦恼。无论我们怎么设置css样式都无济于事，因为select元素的优先级要比div高。所以我们就要选用比select元素优先级还要高的元素来遮挡它。这时候我们想到了iframe。我们可以在div里加上iframe来实现这种效果。
其实网上有很多类似的代码。但是iframe的大小设置是个问题，要做到和div的大小一样比较困难，这里展示一点小技巧。

就是用parentNode。具体的代码如下：

在div之间加入

document.writeln('<iframe src="" frameborder="0" style="position:absolute; visibility:inherit; top:0px; left:0px; width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight); z-index:-1;"></iframe> ');

我们可以看到在设置style 的时候width:expression(this.parentNode.offsetWidth);表达式的方式。this.parentNode.offsetWidth就代表div的宽度

offsetParent直接的将是影响元素位置的上级element，而parentElement与位置显示无关时dom中的上级element。
例如：
<BODY>
<div style="border: 1px solid black;position:absolute;">
<form>
<input type="checkbox" id="cc">
</form>
</div>
这个例子中，“cc”元素的offsetParent是div，如果去掉div的position属性，那么cc的offsetParent就会变为body。而parentElement一直都为form。
与此相关的还有offsetLeft和offsetTop两种属性，他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持