`

div浮动在select上

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div style="z-index:10;position:absolute;top:0px;width:100;height:18;overflow:hidden;" onmouseover="this.style.height=100;" onmouseout="this.style.height=18;">
<iframe   style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank">
</iframe>
<div style="background-color:#cccccc;">aaaaaaa<br>bbbbbbb<br>ccccccc<br>ccccccc<br>ccccccc<br>ccccccc</div>
</div>
<select style="width:200" ><option>test0<option>test1<option>test2<option>test3</select>
<br>
<pre>源码网:www.codepub.com
Div被Select挡住,是一个比较常见的问题。
有的朋友通过把div的内容放入iframe或object里来解决。
可惜这样会破坏页面的结构,互动性不大好。
这里采用的方法是:
虽说div直接盖不住select
但是div可以盖iframe,而iframe可以盖select,
所以,把一个iframe来当作div的底,
这个div就可以盖住select了.
</pre>
</body>
</html>
分享到:
评论

相关推荐

    让div浮动在select之上的完美解决方案!多浏览器兼容

    本文将探讨如何实现"让div浮动在select之上的完美解决方案",并确保在多个浏览器中具有良好的兼容性。 首先,我们需要理解`z-index`属性在CSS中的作用。`z-index`决定了元素在堆叠上下文中的层级,数值越大,元素越...

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

    这个问题在现代浏览器中通常不会出现,但在IE6中,`&lt;select&gt;`下拉菜单会出现在任何其他浮动元素或绝对定位元素之上,即使这些元素在HTML结构中位于`&lt;select&gt;`前面。这导致了设计上的困扰,因为开发者可能希望某些...

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    在这个“HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码”中,我们将深入探讨如何利用这些技术实现一个创新的下拉菜单。 首先,HTML5中的`&lt;select&gt;`元素通常用于创建选择列表,但其样式控制有限。为了打破这个...

    ie6下select遮挡div

    标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题:当在网页上使用select下拉框时,它会覆盖在其他使用绝对或相对定位的元素(如div)之上,导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...

    精美漂亮的实用div+css模仿select下拉框控件

    在网页设计中,`div+css`是一种常见的布局方式,用于构建页面结构和样式,而`select`控件则是HTML中的一个基础元素,通常用于创建下拉列表供用户选择。本项目通过`jq`(jQuery)库实现了对`select`控件的模仿,创建...

    ie6下DIV覆盖select框js解决代码

    这个问题主要体现在`select`元素总是会出现在`div`之上,无论`div`的`z-index`设置得多高。这在网页设计中是一个常见的兼容性问题,尤其是在尝试创建弹出窗口或浮动元素时。本文将详细介绍如何通过JavaScript来解决...

    jQuery实现的浮动层div浏览器居中显示效果

    本篇文章将详细讲述如何使用jQuery实现一个浮动层(Div)在浏览器中居中显示的效果。 首先,我们需要在HTML页面的`&lt;head&gt;`部分引入jQuery库。在文档中,我们通过`&lt;script&gt;`标签引入了jQuery的压缩版本(`jquery-...

    用CSS和Div美化select样式的简单方法

    总之,通过CSS和Div,我们可以有效地控制SELECT元素的样式,提高其在各种浏览器上的视觉一致性。需要注意的是,由于浏览器的兼容性问题,有时可能需要使用特定的hack或条件注释来确保在所有环境下都能正确显示。在这...

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

    在某些情况下,当一个HTML页面中的select元素被点击时,其下拉选项可能会穿透并显示在覆盖在其上方的其他DOM元素(如一个浮动的DIV)之下,导致视觉上的不正常。这个问题主要出现在IE6至IE9等旧版本的浏览器中。 ...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

    可浮动的左右列选择框

    2. 在待选区的`div`中,用`&lt;select&gt;`元素创建一个多选下拉列表,通过`&lt;option&gt;`标签添加各项。 3. 使用JavaScript或jQuery监听`select`元素的`change`事件,当用户做出选择时,将选定的`option`移动到已选区的`div`...

    用javascript实现select的美化的方法

    2. 使用脚本找到 Select 标签在网页上的绝对位置,并在该位置上用 DIV 标签创建一个假的 Select 标签。 3. 读取 Select 标签中的值,并将其应用到假的 Select 标签中。 4. 当用户点击假的 Select 标签时,浮动出一个...

    两个div如何并排一行具体该怎么实现

    这样,`clearfix`伪元素会在容器内部创建一个新的块格式化上下文,有效地清除了浮动的影响,保持了容器的高度。 总结一下,要实现两个`div`并排显示,可以通过以下步骤: 1. 使用`float:left`使`div`元素浮动并靠左...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    如:我想要&lt;div id="ok"&gt;这里是弹出浮动遮罩层&lt;/div&gt; 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    但在IE6中,select元素具有一个特殊的默认z-index,即使其值较低,它仍然会浮在其他元素之上,特别是浮动或绝对定位的元素,如EasyUI的dialog。 解决这个问题的方法有几种: 1. **修改CSS**:为弹出窗口的div添加...

    静态HTML/style/DIV布局技术重点

    - 响应式设计:使用标签设置视口,以便在不同设备上适配页面。 - 表单处理:创建表单元素如、&lt;select&gt;、,并学习如何处理用户输入。 2. CSS(层叠样式表): CSS用于控制HTML元素的外观、布局和排版。掌握CSS的...

    js+css实现select的美化效果

    `.div-select-text`是显示当前选中项的部分,设置为左浮动,背景颜色为白色,并且通过`overflow: hidden`来处理文本溢出的情况。`.div-select-arrow`用于显示箭头,它浮于右侧,包含一个内部`div`来呈现箭头图形。`....

    更换select下拉菜单背景样式的实现代码

    2. `#uboxstyle .select_box`:这个类定义了包含`select`元素的外层`div`样式,同样设置了宽高和浮动属性。 3. `.tag_select`, `.tag_select_hover`, `.tag_select_open`:这三个类分别对应下拉菜单在正常状态、...

    JS打开关闭移动层动画实例

    这在网页交互设计中非常实用,能够帮助用户更好地操作页面上的浮动窗口或者菜单等组件。 #### 二、核心功能点 ##### 1. 初始化设置 - **menuPoint**:存储与移动相关的坐标和尺寸信息。 - `prox`: 指向元素的起始...

Global site tag (gtag.js) - Google Analytics