怎么设置一个Div层使之浮在最上面?

Soft21 2002-11-25 05:37:21
一个Div,我设置他的绝对显示位置,但老在其他控件(如:Select)的后面,被遮住了,我要让它在最前面显示,应该怎么办?
...全文
676 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
emu 2002-11-26
  • 打赏
  • 举报
回复
不如这样吧:

<script defer>
s1.style.width=i1.offsetWidth
s1.style.top=i1.offsetTop
s1.style.left=i1.offsetLeft
</script>

这样严谨一点
emu 2002-11-26
  • 打赏
  • 举报
回复
别的还行(style.zIndex设小一点就行了),要对付select一般要曲线救国呵呵,在低版本的IE中对付iframe也是(http://expert.csdn.net/Expert/TopicView1.asp?id=1108573)。

试试这个,对付select的
<body>
<div style="background-color:yellow;width:70;height:100;position:absolute;left:50"></div>
<input id=i1 onmouseover="this.style.display='none';s1.style.display=''">
<select id=s1 style="display:none" onmouseout="this.style.display='none';i1.style.display=''">
<script defer>
s1.style.width=i1.offsetWidth
</script>
</body>
动广告代码 右下角漂代码 [removed] initAd();//载入页面后,调用函数initAd() [removed] [removed] <!-- function initAd() { document.all.AdLayer.style.posTop = -200; //设置onLoad事件激发以后,广告相对于固定后的y方向位置 document.all.AdLayer.style.visibility = 'visible'//设置为可见 MoveLayer('AdLayer');//调用函数MoveLayer() } function MoveLayer(layerName) { var x = 0;//动广告固定于浏览器的x方向位置 var y = 300;//动广告固定于浏览器的y方向位置 var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40; var y = document.body.scrollTop + y - diff; eval("document.all." + layerName + ".style.posTop = y"); eval("document.all." + layerName + ".style.posright = x");//移动广告 setTimeout("MoveLayer('AdLayer');", 0);//设置20毫秒后再调用函数MoveLayer() } //--> [removed] <!--下面为一个ID为AdLayer的(如ID名不为AdLayer, 上面MoveLayer()内的AdLayer也要作相应修改),包括一张带链接的图片--> 本人文学网站开通,欢迎大家赏脸光顾 漂广告代码 <div id="www_qpsh_com" 本人文学网站开通,欢迎大家赏脸光顾 [removed] var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("www_qpsh_com") function floatwww_qpsh_com() { var L=T=0 //by www.qpsh.com var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) if (x R){ xin = false; x = R} y = y + step*(yin?1:-1) if (y B) { yin = false; y = B } } var itl= setInterval("floatwww_qpsh_com()", delay) obj.onmouseover=function(){cle
day02 昨天内容回顾 1、html的操作思想 ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** 2、图像标签 ** 通过html访问本地图片,使用绝对路径,目前有问题 3、超链接标签 4、表格标签 ** 技巧:数里面有多少行,每行里面有多少个单元格 **
5、表单标签 ** <form></form> - action method enctype - method: get post ** 输入项 *** 有name属性 * 普通输入项 type="text" * 密码: password * 单选:radio - name值相同 - value值 * 复选框:checkbox - name值相同 - value值 * 下拉框 select option * 文本域 textarea * 隐藏项:type="hidden" * 文件: type="file" * 提交按钮 type="submit" * 重置 : reset * 使用图片提交: <input type="image" src=""/> * 普通按钮 type="button" 6、div和span * div: 自动换行 * span:在一行显示 CSS 1、css的简介 * css: 叠样式表 ** 叠:一的 ** 样式表: 很多的属性和属性值 * 是页面显示效果更加好 * CSS将网页内容和显示样式进行分离,提高了显示功能。 2、css和html的结合方式(四种结合方式) (1)在每个html标签上面都有一个属性 style,把css和html结合在一起 - <div (2)使用html的一个标签实现 <style>标签,写在head里面 * <style type="text/css"> css代码; </style> * <style type="text/css"> div { background-color:blue; color: red; } </style> (3)在style标签里面 使用语句(在某些浏览器下不起作用) @import url(css文件的路径); - 第一步,创建一个css文件 <style type="text/css"> @import url(div.css); </style> (4)使用头标签 link,引入外部css文件 - 第一步 ,创建一个css文件 - <link rel="stylesheet" type="text/css" href="css文件的路径" /> *** 第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式 *** 优先级(一般情况) 由上到下,由外到内。优先级由低到高。 *** 后加载的优先级高 *** 格式 选择器名称 { 属性名:属性值;属性名:属性值;…….} 3、css的基本选择器(三种) ** 要对哪个标签里面的数据进行操作 (1)标签选择器 * 使用标签名作为选择器的名称 div { background-color:gray; color:white; } (2)class选择器 * 每个html标签都有一个属性 class - <div class="haha">aaaaaaadiv> - .haha { background-color: orange; } (3)id选择器 * 每个html标签上面一个属性 id - <div id="hehe">bbbbbdiv> - #hehe { background-color: #333300; } *** 优先级 style > id选择器 > class选择器 > 标签选择器 4、css的扩展选择器 (1)关联选择器 * <div>

wwwwwwww

div> * 设置div标签里面p标签的样式,嵌套标签里面的样式 * div p { background-color: green; } (2)组合选择器 * <div>1111div>

22222

* 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式 * div,p { background-color: orange; } (3)伪元素选择器(了解,浏览器的兼容性比较差) * css里面提供了一些定义好的样式,可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ** 记忆的方法 lv ha 5、css的盒子模型 ** 在进行布局前需要把数据封装到一块一块的区域内(div) (1)边框 border: 2px solid blue; border:统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right (2)内边距 padding:20px; 使用padding统一设置 也可以分别设置 上下左右四个内边距 (3)外边距 margin: 20px; 可以使用margin统一设置 也可以分别设置 上下左右四个外边距 6、css的布局的漂(了解) float: ** 属性值 left :  文本流向对象的右边 right :  文本流向对象的左边 7、css的布局的定位(了解) position: ** 属性值 - absolute : *** 将对象从文档流中拖出 *** 可以是top、bottom等属性进行定位 - relative : *** 不会把对象从文档流中拖出 *** 可以使用top、bottom等属性进行定位 8、案例 图文混排案例 ** 图片和文字在一起显示 9、案例 图像签名 ** 在图片上面显示文字 10、上午内容总结 1、css和html的四种结合方式(****) 2、css的基本选择器(****) * 标签选择器 使用标签名 * class选择器 .名称 * id选择器 #名称 ** 优先级 style > id > class > 标签 3、css的扩展选择器(了解) * 关联选择器 - 设置嵌套标签的样式 div p {} * 组合选择器 - 不同的标签具有相同的样式 div,p{} * 伪元素选择器 * 超链接的状态 - 原始 :link - 悬停 :hover - 点击 :active - 点击之后 :visited 4、盒子模型(了解) * 边框 border:2px solid red; 上下左右 border-top border-bottom border-left border-right * 内边距 padding:20px 上下左右 * 外边距 margin:20px 上下左右 * 对数据进行操作,需要把数据放到一个区域里面(div) 5、布局的漂(了解) float - left: 后面的div到右边 - right:后面的div到左边 6、布局的定位(了解) position - absolute ** 从文档流中拖出 - relative ** 不会从文档流中拖出 一般在目录里面,标出符号 (********):重点,代码看懂,代码会写,代码理解 - (****重点中的重点***) (了解):代码看懂 (理解):能够把原理讲清楚
常用 网页广告 代码全集 js 广告代码 大全 120种 1:对联广告代码演示下载 2:对联广告带关闭代码演示下载 3:大幅广告自动翻滚代码演示下载 4:大幅图片广告代码演示下载 5:横向滚动图片代码演示下载 6:幻灯图片代码演示下载 7:大幅自动轮换代码演示下载 8:对联广告带上面关闭代码下载 9:右上角翻页关闭代码演示下载 10:两个焦点代码演示下载 11:页面随意漂代码演示下载 12:自由变化显示方式代码演示下载 13:右上拉链式打开代码演示下载 14:全屏缩放广告代码演示下载 15:右下角提示消息广告代码下载 16:右下角弹出关闭变背投演示下载 17:右侧提示点击成全屏演示下载 18:宽频焦点代码演示下载 19:横向移动视觉广告代码演示下载 20:向左移动的广告代码演示下载 21:竖行友情链向上移动代码下载 22:跟随下拉框的广告代码演示下载 23:交叉分离式广告代码演示下载 24:幻灯10个图片轮换代码演示下载 25:分组相关的图片导航代码1下载 26: 分组相关的图片导航代码2下载 27:分组相关的图片轮换演示下载 28:列表式广告代码演示下载 29:杂志式幻灯广告代码演示下载 30:影院模式幻灯广告代码演示下载 31:易趣产品幻灯广告代码演示下载 32:两侧翻牌的广告代码演示下载 33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告代码下载 40:随数字快速翻动幻灯代码下载 41:随图片快速翻动幻灯代码下载 42:两边漂和中间漂组合下载 43:随机显示广告图片代码下载 44:可以设定播放速度的代码下载 45:很不错的漂广告代码下载 46:图片变换特效广告代码下载 47:鼠标移动提示的广告代码下载 48:漂亮的放GG代码的广告框架下载 49:破SP2弹窗24小时弹一次下载 50:定时关闭的背投广告代码下载 51:仿GG和百度的文字动广告下载 52:绕过XP关闭弹出代码下载 53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:新浪FLASH切换广告下载 61:不错的漂广告代码下载 62:24小时退弹一次的代码下载 63:顶部收缩广告效果yahoo-IE7下载 64:仿QQ消息弹出广告效果下载 65:不可阻止的退弹代码演示下载 66:网易顶部展出的大幅广告下载 67:包含flash的通栏滚动banner下载 68:MiniTabbedPages雅虎TAB下载 69:FLASH图片轮换播放器下载 70:flash+xml图片轮换效果下载 71:调用灵活的flash焦点图轮换下载 72:附带缩略图的JS图片轮换下载 73:可翻阅上一条下一条滚动下载 74:MSN左上角flash伸缩广告下载 75:雅虎社区4屏焦点轮换下载 76:搜狐娱乐flash焦点图广告下载 77:FLASH+XML迅雷影片广告特效下载 78:韩国购物网FLASH滚动广告下载 79:Flash+XML滚动新闻代码下载 80:西安腾讯网flash焦点广告下载 81:四屏flash图片轮换代码下载 82:图片渐变轮换焦点图效果下载 83:CSS写的图片滚动下拉广告下载 84:MSN超酷flash图片轮换下载 85:沪江英语网3图弹性广告下载 86:SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88:用实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90:奥林匹克运动会焦点广告下载 91:一种选项卡样式广告代码下载 92:网站页首可关闭广告条下载 93:flash无限图片展示广告下载 94:电子杂志首页flash焦点图下载 95:Zcom电子杂志flash焦点图下载 96:flash滑动焦点图广告代码下载 97:9格FLASH图片广告代码下载 98:MSN健康频道CSS标准焦点图下载 99:JS带缩略图的5屏轮换广告下载 100:JS4屏焦点图轮换代码下载 101:索尼中国Flash+Xml广告 下载 102:弹性菜单样式的图片展示 下载 103:带摘要的Flash图片代码下载 104:JS图片卷帘门效果下载 105:3d图片墙flash+xml 下载 106:360度旋转展示flash+xml 下载 107:带翻页的JS图片切换效果 下载 108:J

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧