`
mywhy
  • 浏览: 66187 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

如何让Div处于最上层,可以盖住select

CSS 
阅读更多
Div被Select挡住,是一个比较常见的问题。 今天查找资料整理后总结了如下:  
有的朋友通过把div的内容放入iframe或object里来解决。     但这样会破坏页面的结构,互动性不大好。         这里采用的方法是:         虽说div直接盖不住select     但是div可以盖iframe,而iframe可以盖select,     所以,把一个iframe来当作div的底,     这个div就可以盖住select了.      
1"iframe   做为层的载体"后,     层与主页面的互动是窗口间的互动   
2“用一个iframe当div的底”后,     层与主页面的互动是窗口内的互动         另外,对于方法1,     层的大小变化就会要求iframe的大小随着变化     从主页面到这个层会导致window的blur.         对于方法2,     只是在原有的div前加上这一句     <iframe     style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);"   frameborder="0"   ></iframe>     (如果用css可能要看起来简洁点)     如果用div时用什么代码,加上一这句后几乎代码不用改变。
分享到:
评论

相关推荐

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    在网页设计和开发中,有时候我们需要处理多个`iframe`(内联框架)并实现特定的交互效果,例如只显示其中一个`iframe`中的`div`元素,并确保它在所有其他元素之上,即处于最上层显示。这样的需求通常出现在需要创建...

    多个iframe,其中一个的div能够处于最上层显示

    通过理解和应用这些原理,我们可以在多个 `iframe` 环境中确保某个 `div` 总是处于最上层,即使其他 `iframe` 试图覆盖它。在实践中,根据具体项目的需求和结构,可能需要进行微调和测试以达到最佳效果。

    Div 制作的SELECT

    用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    div 最上层锁定页面

    标题“div最上层锁定页面”涉及到的是网页布局和前端开发中的一个常见需求,即让一个div元素始终显示在页面的最上层,即使其他内容滚动也不会影响到它。这通常用于创建弹出窗口、提示框或者固定导航栏等元素。这种...

    select ——使用DIV 实现 Select

    select ——使用DIV 实现 Select js源码

    div+css select效果

    然后,我们将在`div`内嵌套一个`&lt;select&gt;`元素,并将其`position`设置为`absolute`,这样可以使其脱离正常文档流并定位在`div`的特定位置。 接下来,我们需要用CSS来定制`select`的外观。由于`select`元素在不同...

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    DIV模拟select下拉框

    "DIV模拟select下拉框"就是一种利用JavaScript库,如jQuery,来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素,从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...

    div模拟select实用版

    通过CSS,我们可以让这些`div`看起来像一个下拉列表,同时设置它们的初始状态为隐藏。 2. **JavaScript/jQuery**:用来处理用户的交互事件。例如,当用户点击触发元素时,使用`display:block`显示下拉选项;当点击...

    用div+jq高仿ie6的select表单随内容增加-2012-11-1

    在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div布局。 解决了之前版本的option的value没有传入li的bug。 暂时还无法做到让用户随意更改...

    Div实现仿SelectDemo

    这样做可以让我们更容易地应用CSS样式,实现更加美观和符合设计需求的下拉菜单。通过jQuery,我们可以轻松地监听用户事件,如点击、展开和选择等,进而实现Select的功能。 1. **jQuery插件创建**:在jQuery中,我们...

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

    1. **使用iframe**:将需要覆盖`select`的`div`内容放入一个`iframe`中,由于`iframe`在IE6中拥有独立的堆叠上下文,可以有效遮挡`select`。 2. **模拟Select**:使用JavaScript或jQuery库(如`select2`或`...

    div 模拟select 单选

    select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可,参数传相关背景图片就可。我都已经放到资源包下了。

    div+css模拟select

    为了突破这些限制,开发者经常使用`div`和`css`来模拟`select`下拉菜单,以实现更丰富的视觉效果和交互体验。这种技术被称为“div+css模拟select”。 一、为什么使用div+css模拟select? 1. **样式可控**:使用...

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug,望大家一起改正。

    select实现div图层切换效果(jquery实现)

    在网页设计中,有时我们需要通过不同的交互方式来切换页面上的元素显示,比如通过下拉框(select)的选择来改变div图层的展示。本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应...

    DIV+CSS+JS仿Select下拉表单

    【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践,它旨在通过HTML的`&lt;div&gt;`元素、CSS样式和JavaScript脚本,实现一个功能与原生`&lt;select&gt;`标签类似的下拉选择器。这种自定义下拉表单在界面设计...

    div+js+css模拟select并且把无效的select选项设置为灰色不可用

    这种做法可以让设计师更好地控制样式,实现更丰富的交互效果。本文将深入探讨如何利用这三种技术来模拟`select`元素,并且将无效的选项设置为灰色不可用状态。 首先,我们来看`div`元素。在HTML中,`div`是一个非常...

    解决div总是被select遮挡的问题.rar

    在网页设计中,有时会遇到一个常见的问题,即`div`元素被`select`下拉框遮挡。这个问题主要源于浏览器的默认样式和渲染机制。`select`元素通常具有较高的Z轴顺序(z-index),因此它会覆盖其他层叠元素,如`div`。在...

Global site tag (gtag.js) - Google Analytics