css被遮挡的绝对定位
来源:aliued.com 发布时间:2008-02-29 12:00:00
标签:定位,css,div
<div class=”A” style=”position:relative;”>A (relative)
<div class=”logo” style=”position:absolute;z-index:99999;“></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>
最近做minisite项目时,碰到了个奇怪的定位问题: 以上的A,B两个盒子是相对定位,
标牌logo是A的子级,基于A做绝对定位
问题描述:我们希望标牌logo显示在最上面,但在IE下logo标牌部分被B区域遮住,B在最上层显示,调整logo的z-index的数值调整无效,firefox下显示正常。
解决方案:先了解一下所涉及到的几个定位特性(非官方解释):
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时,代码靠后的z-index优先。
3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
这个问题主要是ie对上面第3条错误解释导致的—在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别,这种方法绕了一个大圈:z-index为负值时,产生了新的ie bug。
按照定位的特性,ie的这个bug是可以回避的,从表面上看 B 遮住了logo,实际上是 B 遮住了logo的父级 A ,只要将 A 的z-index设定大于B即可。
<div class=”A” style=”position:relative;z-index:1;“>A (relative)
<div class=”logo” style=”position:absolute;”></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>
0
投稿
猜你喜欢
- 年前帮manager 招GUI设计实习生 (PS. 这个实习生职位依然open,欢迎有兴趣的同学来投,邮箱jj.ying [at] hp.c
- 这是base2的作者Dean Edwards 2007年3月份的一篇文章。最近正在折腾JavaScript库,感觉Dean给出的这些规则很中
- 面向对象的程序设计随着程序的设计的复杂性增加,结构化程序设计方法又不够用了。不够用的根本原因是“代码重用”的时候不方便。面向对象的方法诞生了
- 语法: ROW_NUMBER() OVER([ <partition_by_clause>] <order_by_clau
- 随着现在宽屏显示器的流行,Flash的全屏模式下,越来越需要考虑到普屏显示器与宽屏显示器的差别。Flash全屏模式有以下特点:窗口最大化,且
- 大家在使用ASP设计用户提交表单的时候,如果涉及到网址输入框,那么相信都有可能会用到这个效果,使用正则表达式验证网址合法性。代码如下:<
- 如何写入超长的字符串? 我们可使用Command写入,来完成大容量的字符串的操作: dim&n
- FCKeditor是目前互联网上最好的在线编辑器,功能强大,支持IE 5.5+ (Windows), Fire
- 虽然以前我写过IE6、IE7、IE8共存的解决方案,但是看到IETester这个软件以后那些都已经没有意义了(那些办法副作用比较大,而且实现
- Macromedia StandardMacromedia Dreamweaver MXMenu Commandsphotoshop快捷键大
- Function closeUBB(strContent) '*************************
- 若数据库是sql server,我以前为了返回插入记录的id,一般是用下面的存储过程:程序代码 create procedure&
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误: 服务器: 消息 1813,级别 16,状态 2,行 1 未能打开新数据库 '
- 定义:Dim MyArray() Redim MyArray(5)Session("StoredAr
- Altova 公司的 XMLSPY 是个不可多得的好东西,它几乎可以开发所有的 XML 产品。最近用它来做 Schema
- 1. ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,ascii(0
- 获取一组radio被选中项的值var item = $(’input[@name=items][@checke
- SQL Server数据库连接中常见的错误分析:一."SQL Server 不存在或访问被拒绝"这个是最复杂的,错误发生
- JAN-1(January) FEB-2(February) MAR-3(March)APR-4(April) MAY-5(Ma
- 那里都有狭窄的空间:网页横幅、新闻标题处的空间、柱状的广告,但一张来自照相机的照片却要大很多,它们的比例一般是 6 × 4 英寸 。你如何处