<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
其实实质就是在DIV下面铺一层东西(iframe),档一下Select.
分享到:
相关推荐
在本案例中,"解决div总是被select遮挡的问题.rar"提供了解决方案,通过引入一个透明的`iframe`来规避这一现象。 首先,我们需要理解Z轴顺序的概念。在CSS中,`z-index`属性用于指定元素在堆叠上下文中的层级。具有...
这个插件,可能是名为“bgiframe”的插件(从压缩包子文件的文件名推断),被设计用来解决IE6下select遮挡div的问题。bgiframe插件会在被遮挡的元素上创建一个背景iframe,通过这种方式,即使在select控件存在的情况...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中,有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的,尤其是`z-index`值的设置不...
在IE6中,无论`z-index`设置得多高,`div`层通常都无法遮挡`select`组件,这是因为`select`在IE6中被赋予了一个特殊的“顶级”堆叠上下文。 为了解决这个问题,开发者们通常会采用以下几种策略: 1. **使用iframe*...
在传统的布局中,为了解决div被select遮挡的问题,可能会将div的内容放入iframe或者object元素中。这样做的好处是iframe或object自身通常能够覆盖页面上的其他元素,包括select。然而,这样做也有其缺点,比如可能会...
在互联网的早期,Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器,但它的兼容性和渲染机制存在诸多问题,其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现,但在IE6中,`...
然而,在实际应用中,当layer弹窗内的select组件展开时,有时会出现被其他元素遮挡的问题,这会严重影响用户体验。为了解决这一问题,我们可以采取以下策略。 首先,我们要理解导致select被遮挡的原因。通常,layer...
由于`Iframe`在`Div`下方,用户可以通过`Iframe`间接与`Div`进行交互,从而避免了被`Select`遮挡的问题。同时,`Iframe`的透明设置不会影响页面的视觉效果。 代码中的实现如下: ```html <div style="z-index: 10;...
例如,`select` 的边框、背景色或阴影可能被 `div` 层遮挡,或者 `div` 的透明度设置可能影响到 `select` 的可见性。 3. **JavaScript 或 jQuery 事件处理**:如果使用了 JavaScript 或 jQuery 来处理 `div` 层的...
标题"解决DIV在IE下被下拉列表select穿透的问题(二)"所提及的,是一个典型的IE浏览器特有的问题。这个问题涉及到HTML中的`<div>`元素和`<select>`下拉列表之间的交互,具体表现为在Internet Explorer(特别是旧版本...
Div被Select挡住,是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来解决。 可惜这样会破坏页面的结构,互动性不大好。 这里采用的方法是: 虽说div直接盖不住select 但是div可以盖iframe,而...
在html中关于select元素的问题在很多地方都提出过,而在前段...相关文章:div层被flash层遮盖问题解决思路 第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果
介绍: 效果演示:麦田圈 只要在层里面加上下面代码就可以了~ iframe src= style=width:800px;height:536px;top:0px;left:0px;position:absolute;visibility:inherit;z-index:-1; frameborder=0/iframe
总结来说,面对IE6中的`div`层被`select`控件遮住的问题,我们可以利用`iframe`作为遮罩,并通过设置`z-index`和动态调整`iframe`尺寸的方法来解决。虽然这个方法在现代浏览器中可能不再适用,但对于仍然需要支持IE6...
今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
通过以上步骤,我们可以成功地使用`<iframe>`作为遮罩层,解决IE6下`<select>`无法被`<div>`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...
在这个例子中,`<div id="PAL2">`的z-index设为8,而DropdownList(即`<select>`)的z-index设为7,这样DropdownList就会被<div>覆盖,从而解决了遮挡问题。 总之,理解有窗口元素和无窗口元素的概念,以及它们与z-...