css被遮挡的绝对定位

来源:aliued.com 时间:2008-02-29 12:00:00 

 

<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>
标签:定位,css,div
0
投稿

猜你喜欢

  • 在SQL Server中编写通用数据访问方法

    2009-01-20 11:35:00
  • MySQL 缓存 Query Cache

    2010-03-13 17:06:00
  • 了解WEB页面工具语言XML(三)支持工具

    2008-09-05 17:18:00
  • Favicon图标小常识

    2010-04-01 12:01:00
  • 亚马逊购物用户体验分析(三)

    2009-10-25 12:53:00
  • MySQL数据库锁机制的相关原理简介

    2010-04-22 15:34:00
  • 浅淡BANNER设计

    2010-09-25 18:37:00
  • 经验:解决DB2中出现的SQL1032N错误现象

    2009-09-02 14:10:00
  • ASP 使用三层架构 asp中使用类

    2011-03-16 10:52:00
  • phpstudy apache开启ssi使用详解

    2023-05-25 08:04:44
  • SQL Server 对表的主键设计问题及解决办法

    2010-06-07 13:29:00
  • 如何用SA-FileUp上传一个单纯的HTML文件?

    2010-05-18 18:29:00
  • IE8网页显示不正常 用”兼容性视图”搞定

    2009-03-28 11:13:00
  • Oracle 用户权限管理方法

    2009-08-15 10:54:00
  • SQL语句练习实例之五 WMS系统中的关于LIFO或FIFO的问题分析

    2011-11-03 16:59:59
  • 比较规范的验证Email地址是否正确的正则表达式

    2009-07-28 17:55:00
  • 转换字符串单词的第一个字母为大写

    2007-10-18 10:50:00
  • asp日期 时间 星期函数使用方法详解

    2007-09-21 17:38:00
  • asp下以Json获取中国天气网天气的代码

    2011-03-06 11:01:00
  • 泛泛而谈界面视觉效果的一致性

    2010-01-05 17:05:00
  • asp之家 网络编程 m.aspxhome.com