div层调剂z

日期:2020-10-18 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

z-index 失效

在做的全过程中,发现了1个很简易却又许多人应当碰到的难题,设定Z-INDEX特性失效。在CSS中,只能根据编码更改等级,这个特性便是z-index,要让z-index起功效有个小小的前提条件,便是元素的position特性如果relative,absolute或是fixed。

1.第1种状况(z-index不管设定多高都不起功效状况):

这类状况产生的标准有3个:

1、父标识 position特性为relative;
2、难题标识无position特性(不包含static);
3、难题标识含有波动(float)特性。

eg:z-index等级不起功效,波动会让z-index无效,编码以下:


拷贝编码
编码以下:

<DIV style="POSITION: relative; Z-INDEX: 9999">
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">
</DIV>

处理方法有3个(任1便可):

1、position:relative改成position:absolute;
2、波动元素加上position特性(如relative,absolute等);
3、除去波动。

2.第2种状况

IE6下,等级的主要表现有时并不是看子标识的z-index多高,而要看全部DOM tree(连接点树)的第1个relative特性的父标识的等级。

eg:IE7与IE6拥有一样的bug,缘故很简易,尽管照片所属div当今的老爸等级很高(1000),可是因为老爸的老爸不管用,可伶了9999这般强势的孩子沒有左右之日啊!,编码以下:


拷贝编码
编码以下:

<DIV style="POSITION: relative">
<DIV style="POSITION: relative; Z-INDEX: 1000">
<DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7⑴.jpg"> </DIV>
</DIV>
</DIV>

处理方法: 在第1个relative特性再加1个更高的等级(z-index:1),编码以下:


拷贝编码
编码以下:

<DIV style="POSITION: relative; Z-INDEX: 1">
<DIV style="POSITION: relative; Z-INDEX: 1000">
<DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7⑴.jpg"> </DIV>
</DIV>
</DIV>

上一篇:CSS3 animation完成逐帧动漫实际效果 返回下一篇:没有了