`
hhr_michael
  • 浏览: 74348 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

关于DIV被SELECT遮挡问题

UP 
阅读更多
<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

    在本案例中,"解决div总是被select遮挡的问题.rar"提供了解决方案,通过引入一个透明的`iframe`来规避这一现象。 首先,我们需要理解Z轴顺序的概念。在CSS中,`z-index`属性用于指定元素在堆叠上下文中的层级。具有...

    ie6下select遮挡div

    这个插件,可能是名为“bgiframe”的插件(从压缩包子文件的文件名推断),被设计用来解决IE6下select遮挡div的问题。bgiframe插件会在被遮挡的元素上创建一个背景iframe,通过这种方式,即使在select控件存在的情况...

    最顶层div被flash或者下拉列表遮挡的问题解决

    ### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中,有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的,尤其是`z-index`值的设置不...

    解决IE6中 Div层挡不住Select组件

    在IE6中,无论`z-index`设置得多高,`div`层通常都无法遮挡`select`组件,这是因为`select`在IE6中被赋予了一个特殊的“顶级”堆叠上下文。 为了解决这个问题,开发者们通常会采用以下几种策略: 1. **使用iframe*...

    div总是被select遮挡的解决方法

    在传统的布局中,为了解决div被select遮挡的问题,可能会将div的内容放入iframe或者object元素中。这样做的好处是iframe或object自身通常能够覆盖页面上的其他元素,包括select。然而,这样做也有其缺点,比如可能会...

    解决IE6 中select 穿透 div 等层的问题

    在互联网的早期,Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器,但它的兼容性和渲染机制存在诸多问题,其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现,但在IE6中,`...

    layui layer select 选择被遮挡的解决方法

    然而,在实际应用中,当layer弹窗内的select组件展开时,有时会出现被其他元素遮挡的问题,这会严重影响用户体验。为了解决这一问题,我们可以采取以下策略。 首先,我们要理解导致select被遮挡的原因。通常,layer...

    Div Select挡住的解决办法

    由于`Iframe`在`Div`下方,用户可以通过`Iframe`间接与`Div`进行交互,从而避免了被`Select`遮挡的问题。同时,`Iframe`的透明设置不会影响页面的视觉效果。 代码中的实现如下: ```html &lt;div style="z-index: 10;...

    DIV 层 select

    例如,`select` 的边框、背景色或阴影可能被 `div` 层遮挡,或者 `div` 的透明度设置可能影响到 `select` 的可见性。 3. **JavaScript 或 jQuery 事件处理**:如果使用了 JavaScript 或 jQuery 来处理 `div` 层的...

    解决DIV在IE下被下拉列表select穿透的问题(二)

    标题"解决DIV在IE下被下拉列表select穿透的问题(二)"所提及的,是一个典型的IE浏览器特有的问题。这个问题涉及到HTML中的`&lt;div&gt;`元素和`&lt;select&gt;`下拉列表之间的交互,具体表现为在Internet Explorer(特别是旧版本...

    option挡住div解决方法

    Div被Select挡住,是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来解决。 可惜这样会破坏页面的结构,互动性不大好。 这里采用的方法是: 虽说div直接盖不住select 但是div可以盖iframe,而...

    select网页下拉列表与div层遮盖问题

    在html中关于select元素的问题在很多地方都提出过,而在前段...相关文章:div层被flash层遮盖问题解决思路 第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果

    解决div总是被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控件遮住的问题解决方法

    总结来说,面对IE6中的`div`层被`select`控件遮住的问题,我们可以利用`iframe`作为遮罩,并通过设置`z-index`和动态调整`iframe`尺寸的方法来解决。虽然这个方法在现代浏览器中可能不再适用,但对于仍然需要支持IE6...

    IE6 select z-index无效,遮挡div bug的解决方法

    今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...

    ie6 select无法被div遮盖的bug解决方法

    通过以上步骤,我们可以成功地使用`&lt;iframe&gt;`作为遮罩层,解决IE6下`&lt;select&gt;`无法被`&lt;div&gt;`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...

    解决控件遮挡问题:关于有窗口元素和无窗口元素

    在这个例子中,`&lt;div id="PAL2"&gt;`的z-index设为8,而DropdownList(即`&lt;select&gt;`)的z-index设为7,这样DropdownList就会被&lt;div&gt;覆盖,从而解决了遮挡问题。 总之,理解有窗口元素和无窗口元素的概念,以及它们与z-...

Global site tag (gtag.js) - Google Analytics