`
hhr_michael
  • 浏览: 74311 次
  • 性别: 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.

分享到：
| iText加入页码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决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-...

Magicbox
Global site tag (gtag.js) - Google Analytics