z-index失效的原因

在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。

1.第一种情况(z-index无论设置多高都不起作用情况):

这种情况发生的条件有三个:

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性。

eg:z-index层级不起作用,浮动会让z-index失效,代码如下:

1

<</code>DIV style="POSITION: relative; Z-INDEX: 9999">

2

<</code>IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0.jpg">

3

</</code>DIV>

解决办法有三个(任一即可):

1、position:relative改为position:absolute;

2、浮动元素添加position属性(如relative,absolute等);

3、去除浮动。

2.第二种情况

IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。

eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!,代码如下:

1

<</code>DIV style="POSITION: relative">

2

<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3

<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4

</</code>DIV>

5

</</code>DIV>

解决办法: 在第一个relative属性加上一个更高的层级(z-index:1),代码如下:

1

<</code>DIV style="POSITION: relative; Z-INDEX: 1">

2

<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3

<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4

</</code>DIV>

5

</</code>DIV>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏csxiaoyao

vim按键整理

2635
来自专栏python3

tkinter -- Listbox

Listbox 为列表框控件,它可以包含一个或多个文本项(text item),可以设置为单选或多选

912
来自专栏天天

CSS3

571
来自专栏禅林阆苑

vim按键整理 【原创】

vim按键整理 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxi...

32710
来自专栏CDA数据分析师

excel隔行选取新方法,99.99%的人没用过!

文 | 赵志东 有一个excel表格,需要隔N行选取。可能是隔一行,也可能是隔2行、3行。 ? 常见的有两种方法: 一、按ctrl键不松用鼠标逐行选取。如果需要...

1756
来自专栏王亚昌的专栏

A*算法C实现

参考 http://www.cppblog.com/christanxw/archive/2006/04/07/5126.html 实现了A*算法,模拟了一下,...

722
来自专栏阿凯的Excel

自定义单元格格式介绍(第一期 数字版)

之前分享金字塔图(有链接哦)的时候,有分享将负数显示为正数的小技巧,当时有朋友让我全面的分析自定义单元格格式,因为我很喜欢一句话:“迟到比不到好”。所以我就故意...

2845
来自专栏ACM算法日常

棋盘(数学趣味题) - HDU 5100

Consider the problem of tiling an n×n chessboard by polyomino pieces that are k×...

643
来自专栏小樱的经验随笔

UVA 1030 - Image Is Everything【模拟+思维+迭代更新】

题目链接:uva 1030 - Image Is Everything 题目大意:有一个最大为n*n*n的立方体的一个不规整立体,由若干个1*1*1的小正方体构...

2565
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

1448

扫码关注云+社区