解决办法:

父级元素加上position:relative;并设置z-index.

父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index.

<div style="position:relative;z-index=2">

<p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p>

<div>

<div style="position:relative;z-index=1">

...

<div>

上面的例子中,倘若将第一个div的z-index设置为-1,则无论p的z-index为多少,多会被下面的div遮住。

相反,倘若下层div的z-index也设置成2,ie7正在解释时,会按照"position:relative"的层的顺序,自动叠加,即实际值是3.

没有加position属性时,所有值继承自父级。

ie7 z-index 失效问题的更多相关文章

  1. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  2. QAbstractItemView::setRootIndex(const QModelIndex & index) 失效

    问题: 在逻辑中使用了, QAbstractItemView::setRootIndex(const QModelIndex & index), 第一次设置生效, view 进入了model ...

  3. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  4. ie7下z-index失效问题解决方法(详细分析)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...

  5. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  6. ie7下z-index失效问题解决方法

    绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上 ...

  7. IE7 float:left失效的解决方法

    <div id="a" style="width:500px"> <div id="b" style="widt ...

  8. IE7下z-index失效问题

    看代码: HTML <div class="select-wrap"> <div class="select-name">院系</ ...

  9. NULL字段对于UNIQUE INDEX失效

  10. [ie兼容]ie7 margin-bottom失效

    有时候子元素设置了margin,父元素也设置了margin,父元素的margin在ie7下会失效(包括padding) 解决方法:父容器加属性overflow:hidden;zoom:100%;

随机推荐

  1. 【BZOJ-3681】Arietta 网络流 + 线段树合并

    3681: Arietta Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 182  Solved: 70[Submit][Status][Discuss ...

  2. 【bzoj 1076】【SCOI2008】奖励关

    1076: [SCOI2008]奖励关 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1602  Solved: 891[Submit][Status ...

  3. “一次编写,随处运行” Intel HTML5技术研讨会

    HTML5 是一种开放标准.通过使用此标准,开发人员只需编写一次程序,即可在任何地方运行. 这一跨平台方法能够显著增加开发人员的总体潜在受众,同时在不同屏幕尺寸上为用户带来更一致的体验.因此,HTML ...

  4. 【Go命令教程】11. go vet 与 go tool vet

    命令 go vet 是一个 用于检查 Go 语言源码中静态错误的简单工具.与大多数 Go 命令一样,go vet 命令可以接受 -n 标记和 -x 标记.-n 标记用于只打印流程中执行的命令而不真正执 ...

  5. 体验h5离线缓存

    摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...

  6. 在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建

    通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅 ...

  7. 谈谈Unicode编码,简要解释UCS、UTF、BMP、BOM等名词

    这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级.整理这篇文章的动机是两个问题: 问题一: 使用Windows记事本的“另存为 ...

  8. 利用npm 安装删除模块

    转自 涵一原文 利用npm 安装删除模块 1. npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录:[npm install -g xxx]利用npm安 ...

  9. WordPress主题开发:循环代码

    have_posts() 有没有文章信息 if...else <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?&g ...

  10. android 工具类 DateUtil

    提取了一些在开发过程中可能会用到的日期相关的函数作为工具类.供大家參考: /** * 日期操作工具类. * * @author shimiso */ public class DateUtil { p ...