z-index总结【转载http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html】

元素位置重叠的背景常识

(x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠)。当我们用css为某个元素指定float浮动或者position定位后,元素的定位将会依情况发生如下改变:

1. 指定float值left/right

行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框。

2. 指定position值relative

可以相对于其在普通流中的位置偏移,原本所占的空间仍保留。

3. 指定position值absolute

行内元素也会隐形变成块元素,元素会脱离文档的普通流,相对于最近的已定位祖先元素偏移,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块偏移。

4. 指定position值fixed

元素会脱离文档的普通流,相对于浏览器窗口偏移,固定在浏览器的某个位置。

以上四种情况下,文档中的元素都将可能被浮动/定位元素覆盖产生重叠。

元素位置重叠的可能原因

1. 负边距/float浮动

margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。

浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。

2. position的relative/absolute/fixed定位

当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

3. window窗口元素引发的重叠

浏览器解析页面时,先判断元素的类型:窗口元素优于非窗口元素显示(也就是窗口元素会覆盖在其它非窗口元素之上),同为非窗口类型才能在激活z-index属性控制堆叠顺序。

Flash元素属于window窗口元素

所以如果页面上flash元素和其他元素发生重叠,需要先将flash嵌入的wmode属性的window(窗口,默认的会造成上面所说的问题)改为非窗口模式:opaque(非窗口不透明)或者 transparent(非窗口透明)。

ie6下select属于window类型控件

同理,它也产生窗口元素的遮挡问题。解决方法使用iframe(原理:ie6下普通元素无法覆盖select,iframe可以覆盖select,普通元素可以覆盖iframe)/用div模拟实现select的效果。我一般会为被select遮挡的div在内部追加(appendChild)一个空的子iframe,设置position:absolute脱离文档流空间、width:100%;height:100%;覆盖整个父div、z-index:-1;确保值要小于父div的z-index值让父div覆盖显示在iframe上面,借助这个iframe来覆盖select。

简单总结及建议

普通元素的堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面,请小心计算好浮动和负边距布局,注意窗口元素的特殊性;非同级关系和非父子关系定位元素之间的堆叠顺序,要向上追溯到其为兄弟关系的父元素上,先比较其z-index值,只有父辈元素中的z-index值较大的后代子元素才能超过z-index值较小的父辈元素及其子孙元素。

为了在编码时就减少z-index值判断的复杂性,我建议对于一般页面内容类定位元素的z-index设置小于99的值(如非必要不使用负值),广告类定位元素的z-index设置100~500的值,公告提示等弹出类定位元素的z-index设置大于500的值;对于比较复杂定位嵌套页面,为了避免ie6/7的显示差异,请为父辈类定位元素显性加上z-index:0或其他值。

时间: 2024-11-05 11:55:27

z-index总结【转载http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html】的相关文章

java中volatile关键字的含义(转载自http://www.cnblogs.com/aigongsi/archive/2012/04/01/2429166.html)

在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和 volatile 关键字机制. synchronized 同步块大家都比较熟悉,通过 synchronized 关键字来实现,所有加上synchronized 和 块语句,在多线程访问的时候,同一时刻只能有一个线程能够用 synchronized 修饰的方法 或者 代码块.

C#:this索引器《转载http://www.cnblogs.com/ArmyShen/archive/2012/08/27/2659405.html》

索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 (3)索引器不是一个变量 索引器和属性的不同点 (1)属性以名称来标识,索引器以函数形式标识 (2)索引器可以被重载,属性不可以 (3)索引器不能声明为static,属性可以 一个简单的索引器例子 using System; using System.Collections; public clas

内部类(转载http://www.cnblogs.com/devinzhang/archive/2012/02/09/2344059.html)

Java内部类总结 Java内部类其实在J2EE编程中使用较少,不过在窗口应用编程中特别常见,主要用来事件的处理.其实,做非GUI编程,内部类完全可以不用. 内部类的声明.访问控制等于外部类有所不同,要灵活使用内部类来编写程序,还是有相当难度的,Java发明了这种难懂的玩意儿,在其他语言中是没有的,但是在Java中,内部类也相当的重要,尤其做GUI开发时候,事件的响应处理全靠内部类了. 内部类所做的功能使用外部类也同样可以实现,只是有时候内部类做的更巧妙些. 内部类按照其所在位置不同,可分为以下

C++了解free和delete(转自:http://www.cnblogs.com/mrye/archive/2012/09/01/2667079.html)

void MyMethod1() {     using namespace std;     int a=6;     int b=6;     int* pa=new int;     int* pb=new int;     *pa=a;     pb=pa;     cout<<"pa的内容赋值为:"<<a<<endl;     delete(pa);     //free(pa);//加上这句造成pa不可用,     //cout<&

gdb调试带参数程序(转:笑笑小白,cnblog http://www.cnblogs.com/rosesmall/archive/2012/04/10/2440514.html)

一般来说GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要 把调试信息加到可执行文件中.使用编译 器(cc/gcc/g++)的 -g 参数可以做到这一点.如: > cc -g hello.c -o hello > g++ -g hello.cpp -o hello 如果没有-g,你将看不见程序的函数名.变量名,所代替的全是 运行时的内存地址.当你用 -g把调试信息加入之后,并成功编译目标代码以后,让我们来看看如何用gdb来调试他. 启动 GDB的方法有以下几种

Android实现推送方式解决方案【转载地址:http://www.cnblogs.com/hanyonglu/archive/2012/03/04/2378971.html】

本文介绍在Android中实现推送方式的基础知识及相关解决方案.推送功能在手机开发中应用的场景是越来起来了,不说别的,就我们手机上的新闻客户端就时不j时的推送过来新的消息,很方便的阅读最新的新闻信息.这种推送功能是好的一面,但是也会经常看到很多推送过来的垃圾信息,这就让我们感到厌烦了,关于这个我们就不能多说什么了,毕竟很多商家要做广告.本文就是来探讨下Android中实现推送功能的一些解决方案,也希望能够起到抛砖引玉的作用.^_^ 1.推送方式基础知识:  在移动互联网时代以前的手机,如果有事情

Android实现下拉导航选择菜单效果【转载地址:http://www.cnblogs.com/hanyonglu/archive/2012/07/31/2617488.html】

本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的

深入浅出之正则表达式(二)转载http://www.cnblogs.com/dragon/archive/2006/05/09/394923.html

深入浅出之正则表达式(二) 前言:       本文是前一片文章<深入浅出之正则表达式(一)>的续篇,在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理.        本文是Jan Goyvaerts为RegexBuddy写的教程的译文,版权归原作者所有,欢迎转载.但是为了尊重原作者和译者的劳动,请注明出处!谢谢!   9.      单词边界 元字符<<\b>>也是一种对位置进行匹

C#加密算法汇总(转载)http://www.cnblogs.com/zengxiangzhan/archive/2010/01/30/1659687.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一:     //须添加对System.Web的引用     using System.Web.Security;          ...          /// <summary>     /// SHA1加密字符串     /// </summary>     /// <param name="source"