ie下的css层叠z-index各种问题详细整理
写asp代码用什么工具最好看图片视频教程下载手机版到新地方有些日子了，差不多适应了这边的工作节奏与流程asp学习。接到的第一个开发任务是几个比较简单的页面，需要做的工作就是先把设计图变成页面，然后使用PHP创建几个请求的接口传递数据，标准且简洁的web开发思路。可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思，所以整理了一些资料和总结分享给大家...注：因为引入了jsfiddle，所以页面加载受影响会稍慢一些^_^
z-index : auto numberz-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远；拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）。
，除我们所熟悉的水平和垂直位置外，元素还可在 "Z轴" 方向上层层相叠、依次向前排开；元素在 "Z 轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。在给定的层叠上下文中，
，它描述了在相同层叠上下文中元素在 "Z轴" 上的显示顺序；同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，
（back-to-font）；不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关；每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序；当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用
当定位元素的 z-index 未设置时（默认为 auto），在IE6 IE7 IE8(Q)下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。
这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。
根据 W3C CSS2.1 规范中的说明，定位元素【p1】和【p3】由于未设置 z-index 特性（使用默认值 auto），它们不会创建新的局部层叠上下文，而定位元素【p2】设置了 z-index:1 则会创建新的层叠上下文。
另，在同一根层叠上下文中，同为 z-index:auto 的定位元素【p1】和【p3】，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示，又，【p2】层叠上下文的层叠级别为正数，所以【p2】的层叠级别要比【p3】高。因此，它们在 Z 轴上的顺序为：（遵循 back-to-font）【p1】 -> 【p3】 -> 【p2】
而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示。此时，由于【p2】处于【p1】的层叠上下文中，所以【p2】在 Z 轴上要比【p3】靠后。
理解层叠上下文、层叠级别与 z-index 之间的关系。在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 z-index 特性，避免此问题的出现。
图片的上半部分就是在非IE6下的交互，图片下半部分是在IE6下的显示效果，当打开虚拟机测试的时候我表示瞬间碉堡了，囧...在IE6下这个tips被盖住了，很明显这个不是我想要的效果，可是为什么会出现这个情况类？接着往下看。
按照正常的思维，z-index层级越高，内容越应该在上面显示，在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6。
在IE6下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。点击 Result 可以看到HTML对应的VIEW。
从以上的代码中可以看到最内层<div>的z-index属性为999，其父元素的z-index属性为100。按照正常的显示逻辑，图片应该正常显示且不会被背景色所影响，可是在IE6下会有问题，直接上图片会比较直观，比较看看IE6下和非IE6浏览器的显示效果。chrome、FF和opera都经过测试了，为了不使图片过多我就拿个chrome的截图吧。
重现这个bug的条件很简单，只要绝对定位（position:absolute）<div>的祖先元素，或者说是最顶级的祖先元素的 relative 属性小于黑色半透明层的z-index层级即可。解决办法也很简单，只需要给的祖先元素加上z-index就可以。
为具有 relative 属性的顶级祖先元素打了鸡血(加了z-index)后，IE6下终于正常显示了。这个问题很现实的教育了我们 - 在拼爹拼不过的条件下我们只能靠自己努力...
IE6下拼爹的问题也就是我在实际开发中碰到的问题，现在已经完美解决且达到需求的效果了。接下来要介绍的是一些我总结的资料，都是介绍在IE环境下得各种z-index的坑。
float 是 css 的定位属性，而且应该是CSS中最常用的属性之一了，至于为什么说它万恶等我改天去准备一篇文章单独进行解说，在这里借着以前的学习笔记简单说几点：
1. IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉；
2.3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样；
3.双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。
有关float的扫盲就先到这里，还有一点就是float毕竟是标准的属性，而且大多数的前端都习惯用它去实现页面，所以我的建议就是：深入理解 HTML语义和表现。
接着开始讲述 z-index和float 在IE6环境下擦出的坑爹的火花...先上一段代码：
个人理解可能是因为<img>的float使得z-index失效造成的。网上还有种说法是因为float和relative两者在定位上问题，所以一起使用的时候会造成此bug。
这个问题其实在是比较常见的了，我早期做项目的时候有幸遇见过这个问题，所以有现成的资料，趁着这次也刚好整理整理、回忆回忆。两个解决办法都是围绕iframe展开的，咱们先来看第一个。
注:在这里如果不加src属性,尽管iframe会把select挡住,但是由于默认iframe为白色,会影响原来的div背景色。解决方法可以加了一个空的HTML文件，并把body 的值设为和原来div背景色一致,这样就解决了默认白色背景色的问题，这里只是一种思路，办法总比困难多^_^。
与很多做国内项目的前端一样，我也会常常忍不住诅咒IE，可是假如换个思考方式我们也得感谢它，工作因为它才有了更多挑战和成就感。
对不理解CSS层叠朋友来说z-index 确实是一个大坑，希望这篇文章能够给那些掉到坑内的朋友一些帮助。
课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动&...查看详情
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式，鼠标移上去和拿开的效果 修改方法如下 1...查看详情
【第一步 整体布局与公共CSS定义】我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图 下载 (116.12 KB)2009-6-1 09:22这样HTML就很容易写出来了复制代码代码如下: <div ...查看详情
【第七步 内容左侧板块(ContentL)布局】 我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。 好~！既然搞清楚结构了，后面我们布局就容易了 我打算标题用<h1>标签，为什么这...查看详情
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用...查看详情
如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下 HTML代码和原来的没有区别： 复制代码代码如下: <div id=Logo> <a href=# id=logoLink>&l...查看详情
说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显...查看详情
代码如下： HTML代码： 复制代码代码如下: <a id=theLink></a> CSS代码： 复制代码代码如下: #theLink{ display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和...查看详情
前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，...查看详情
使用CSS来修饰滚动条 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-ligh...查看详情
