Like

CSS教程:彻底掌握Z-index属性

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。

Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败感。但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多layout方面的挑战提供强有力的帮助。

在这篇文章里,我们会准确的说明究竟什么是Z-index,它为什么会这么不为人所了解,并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异,那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。

这是什么?

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

为了更清晰的描述Z-index是如何工作的,上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

自然的层叠顺序
在一个HTML页面中,自然的层叠顺序(也就是元素在Z轴上的顺序)是由很多因素决定的。下面的是一个列表,它展示的列表项是处于一个层叠环境(stacking context,暂时未找到合适的汉语翻译,应该是指层叠的元素所处的那个层叠的环境)中,这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。
元素的背景和边框会创建一个stacking context
引用:
·具有负值的stacking contexts元素,按照出现的先后顺序排列(越靠后层级越靠上) 
·没有被定位,没有浮动的块级元素,按照出现的先后顺序排列 
·没有被定位,浮动的元素,按照出现的先后顺序排列 
·内联元素,按照出现的先后顺序排列排列 
·被定位的元素,按照出现的先后顺序排列
Z-index 属性,当被正确使用的时候,会改变自然的层叠顺序。
当然,除非元素已经被定位按照互相交叠的形式展现,否则元素的层叠顺序并不会特别的明显。下面的,负边距的BOX被拿来展示,用以说明自然的层叠顺序。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

上面的BOX被定义了不同的背景和边框色,并且后两个是交错的并且定义了负值的顶部边距,所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位,蓝色的BOX位于第二位,金色的排在第三。应用的负边距明确的表明这个事实:这些元素未被设置Z-index 属性;它们的层叠顺序是自然的,或者是默认的,复合规则的。产生交错的现象都是因为负值的边距。
 
为什么它会产生混乱?
即使Z-index并不是一个难以理解的属性,但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。
为了证明Z-index只能工作于被定位了的元素中,这里有同样的三个BOX,它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

灰色的BOX具有“9999”的Z-index值,蓝色的BOX有“500”的Z-index值,金色的有“1”的Z-index值。合乎逻辑的,你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样,因为这些元素都没被设定position属性。
下面是同样的三个BOX,分别都被设置了position: relative,他们的Z-index值还是按照上面那段设定。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

现在的结果是我们所期待的了:这些元素的层叠顺序实现了反向;灰色的BOX覆盖在蓝色之上,蓝色的覆盖在金色之上。
语法

#grey_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #ccc;  
    background: #ddd;  
    position: relative;  
    z-index: 9999;  
}  
#blue_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #4a7497;  
    background: #8daac3;  
    position: relative;  
    z-index: 500;  
}  
#gold_box {  
    width: 200px;  
    height: 200px;  
    border: solid 1px #8b6125;  
    background: #ba945d;  
    position: relative;  
    z-index: 1;  
}
 
重复一下,Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视,尤其是对于那些新手。
 
运用JavaScript
如果你希望通过JavaScript为一个元素动态的加上Z-index 属性,其语法同其他大部分CSS元素能被存取类似,就是使用“驼峰命名法”取代CSS属性中的连字符,就像下面的代码展现的那样。
var myElement = document.getElementById(”gold_box”);  
myElement.style.position = “relative”;  
myElement.style.zIndex = “9999″;
在IE 和 Firefox中的不当解析(兼容性问题)
在某些特定的情况下,关于Z-index 属性的解析会在IE6、IE7以及Firefox2版本中存在一些小小的前后矛盾。
IE中的<select>元素:
IE6中的<select>元素是一个窗口控件,所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是Z-index。下图展示的就是这个问题。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

<select>元素出现在了顶部,它被设置了“相对定位”并且Z-index值为“1”。金色的BOX在这个层叠顺序中排在了第二位,它的Z-index值是“9999”。因为自然层叠顺序及Z-index值的原因,在我们目前所用的所有浏览器中金色的BOX都会排在顶部,但IE6除外。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

这个IE6的BUG导致了很多覆盖在<select>元素上的下拉菜单在弹出下拉选项时失败的问题。一个解决办法是使用JavaScript临时隐藏<select>元素,等到下拉菜单的下拉项收回时再将<select>显示出来。其他的办法会涉及到使用<iframe>。
IE6/IE7中被定位了的父容器:
因父容器(元素)被定位的缘故,IE6/7会错误的对其stacking context进行重置。为了演示这个多少有些复杂的BUG,我们再一次的放置两个BOX,但这次我们会将第一个BOX放置在一个被定位了的元素里。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

灰色BOX的z-index值是“9999”;蓝色BOX的z-index值是“1”,这两个BOX都被设置了position。所以,正确的执行应该是灰色的BOX覆盖在蓝色的之上。
但是在IE6和IE7中,我们却会看到蓝色的BOX处于灰色的之上。这是由灰色BOX外层的父容器也被设置了定位造成的。这两款浏览器错误的将被定位的父容器的stacking context进行了“重置”,但却不应该这样。灰色的BOX拥有一个非常高的Z-index值,它理应因为处在蓝色BOX之上。其他的浏览器对这个问题会进行正确的解析。 
 
Firefox 2中的负值:
在Firefox2版本中,一个负的Z-index值会使元素位于stacking context的后面,而不是位于公认的背景和边框这样的元素stacking context之前。下面的截图展示了这个Firefox 2的BUG。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

下面的是上面截图的HTML版本(限于目前博客所限,做不到能够像Smashing Magazine那样的内容部分显示code demo,需要查看原始实例请去原文章查看) ,如果你在Firefox 3或者其他目前正在被使用的浏览器中查看,你会看到正常的解析结果:灰色BOX的背景(元素stacking context的基底)出现在所有实物的下面,并且灰色BOX内部的文字出现在蓝色BOX的上面。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

普遍应用的展示
对页面中的元素应用z-index属性可以非常便捷的解决各种各样的layout挑战,同时使得设计者可以在他们的设计中使用层叠的项目进行更多的创造。
交错的滑动门菜单:
一个对这个CSS属性实际应用的案例:CTCOnlineCME 这个网站对“正被点击”的tab使用Z-index属性及清晰交错的PNG图片,创造出非常好的效果。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

CSS 气泡:
Z-index 属性还可以用来实现基于CSS的提示气泡,就像下面trentrichardson.com展示的那样

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

Light Box:
如果不是因为应用了z-index 属性,现在也不会有那么多的品质优秀的Light Box脚本可以免费使用,比如说JQuery的一个插件FancyBox。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

Light box 脚本使用半透明的PNG图片来使背景变暗,之后拿来一个新的元素,经常会使用类似窗口的DIV,将之放置在前排。覆盖住屏幕的PNG和之后的DIV都使用Z-index 属性以确保这2个元素会位于页面其他元素之上。
下拉菜单:
类似于Brainjar’s classic Revenge of the Menu Bar的下拉菜单使用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

画廊效果的图片展示:
将JQuery animation和Z-index组合可以创造出幻灯片或画廊式的卓越效果。usejquery.com 网站中的这个demo向我们展示了这两者的绝妙组合带给我们的惊喜。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

Polaroid Photo Gallery by Chris Spooner 采用功能更为强大的CSS3同Z-index配合,创造出了一个当鼠标划过时会重新码放的超cool效果。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

在Fancy Thumbnail Hover Effect 中Soh Tanaka 使用Query为基础的脚本改变z-index的赋值。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

 

Stu Nicholls所做的CSS实验:
Stu Nicholls在他的网站 CSSplay 中阐释了众多的CSS的案例。下面是一些关于z-index属性的作品。
CSS 图片地图

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

CSS 游戏

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

CSS模仿框架

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

增强版的层叠布局:
24 ways 这个网站以Z-index为工具来提升它的模板体验,将年份和日期的长度、宽度延伸到和网站外层容器同等并相互交织,创造出了一个非常有趣的效果。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

奇异的网摘栏:
Janko At Warp Speed 这个网站在“奇异的网摘栏”中使用了Z-index。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

完美的整页背景图:
Chris Coyier 阐述了这个技术并将之应用到了ringvemedia.com 网站上。在内容容器上应用 z-index 以确保它出现在那个看上去像“背景”其实却不是的图片上。

CSS教程:彻底掌握Z-index属性 - liker3 -  我的城市

总结
在CSS中层叠关系是一个复杂的话题。本文并不打算针对这个话题的所有细节进行讨论,而是针对Z-index究竟是如何影响我们网页的层叠顺序进行一次深入的探讨。这里所说的,当被真正的全面理解后,我们会发现这个CSS属性是如此的强大。
初学者现在应该会对这个属性有了非常好的理解,并且会避免很多在对其的使用过程中经常出现的问题。另外,有基础的开发者也会对如何正确使用Z-index来避免很多布局方面的问题有了更为深入的理解,并且为创造出更多的CSS艺术作品打开了大门。

分类: JavaScriptcss

标签: css z-index

IE6浏览器不兼容position:fixed固定定位的解决方法

完美解决IE6浏览器下不兼容position:fixed固定定位 IE6浏览器不兼容position:fixed固定定位的解决方法 - liker3 -  我的城市  (2012-02-21 15:19:01)

IE6浏览器不兼容position:fixed固定定位的解决方法 - liker3 -  我的城市  转载▼

标签: 杂谈分类: 科技

一般的 position:fixed; 实现方法

以我的博客为例,在右下角 <div id="top">...</div> 这个 HTML 元素使用的 CSS 代码如下:#top{
position:fixed;
bottom:0;
right:20px;
}实现让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素。

在 IE6 中实现 position:fixed; 的办法

刚刚提过,在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它。当然,IE6 的问题也不仅仅 position:fixed;

相同的还是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素,这次的代码是:#top{
position:fixed;
_position:absolute;
bottom:0;
right:20px;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}right 跟 left 属性可以用绝对定位的办法解决,而 top 跟 bottom 就需要用上面的表达式来实现。其中在 _position:absolute; 中的 _ 符号只有 IE6 才能识别,目的是为了区分其它浏览器

上面的只是一个例子,下面的才是最重要的代码片段:

使元素固定在浏览器的顶部:#top{
_position:absolute;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop));
}使元素固定在浏览器的底部:#top{
_position:absolute;
_bottom:auto;
_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}这两段代码只能实现在最底部跟最顶部,你可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的数值控制元素的位置。

position:fixed; 闪动问题

现在,问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入:*html{
background-image:url(about:blank);
background-attachment:fixed;
}其中 * 是给 IE6 识别的。

到此,IE6 的 position:fixed; 问题已经被解决了。这里还为大家搜集了一个采用JS解决的办法。

JS的解决方案

JS是我最不愿使用的解决方案,因为这种纯样式的bug用JS来解决有点大材小用,而且JS需要DOM载入后才执行,有可能会出现闪屏的现象.

JS的解决方案很简单,通过设置一个top来实现,top是指分页的上边距离document的上边的长度,可以被分解成下面几项(并不是完整的代码)

top = scrollTop + clientHeight - height(分页的高度)

 

完美解决IE6浏览器下不兼容position:fixed固定定位

 

scrollTop 和clientHeight分别用来解决上面两个问题,滚动条的滚动会影响到scrollTop,而窗口的变化会影响到clientHeight,所以当 这两个事件被触发时必须重置top,于是就形成类似下面的代码,但这段脚本的刷新率会非常高,估计有性能问题.

window.onresize = window.onscroll = function(){
//reset top
};

IE6|IE7中li底部3px间距BUG

<!DOCTYPE HTML>
<html>
<head>
<title>IE67li底部3pxBUG </title>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
li{border:1px solid gray;overflow:hidden;width:120px;}
li span{float:left;}
</style>
</head>

<body>
<ul id=”list”>
<li><span>张三</span></li>
<li><span>李四</span></li>
<li><span>王老五</span></li>
<li><span>刘盲六</span></li>
</ul>
</body>
</html>

截图:

IE6|IE7中li底部3px间距BUG-WEB前端开发网

以下是引发此BUG的条件:

必要条件:
li的子元素设置了浮动(例如:本例中的span设置了左浮动)

充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)
(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一

解决方案:

方案一
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案二
#list li设置float:left,这时#list li可以设置width、height、zoom。
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案三
给li中的span设置vertical-align:top|middle|bottom

本文固定链接: http://www.web92.net/492.html | WEB前端开发

IE6中奇数宽高的BUG

IE6真是太疯狂了。今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0),

如图:IE6中奇数宽高的BUG - liker3 -  我的城市

可是在IE6下查看,却变成了right:1px的效果了:

IE6中奇数宽高的BUG - liker3 -  我的城市

IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码:

CSS代码:

#out {
width: 609px;/*这里宽度为奇数,bug就出现了!!改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}

XML/HTML代码:

<div id=“out”>
<div id=“inn”>此处为内部绝对定位的 DIV</div>
</div>

细数那些不能直视的IE6BUG

1. li在IE中底部3像素的BUG

解决方案:在<li>上加float:left;即可解决

2. IE6中奇数宽高的BUG。

解决方案:就是将外部相对定位的div宽度改成偶数。高度也是一样的。

3. IE6文字溢出BUG

引发这种BUG有几个条件

1.是注释引起的,删除所有注释即可.

2.hidden的input直接放在form下.

3.display为none的div也有可能引发此bug.

4.可以通过外面再包一次DIV解决

由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

解决办法:

1、不放置注释。最简单、最快捷的解决方法;

2、注释不要放置于2个浮动的区块之间;

3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>;

4、去除文字区块的固定宽度,与3有相似之处;

5、在后面加一个<br />或者空格;(不推荐)

6、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–>

7、给盒子加position:relative;属性

4. 样式中文注释后引发失效。

满足下面条件就会引起 注释下面的样式不起作用:

1. css有中文注释

2. css为ANSI编码

3. html为utf-8编码

解决方法:

1. 去掉中文注释,用英文注释

2. 统一css 和 html 的编码

建议采用第二种解决方法

ps: css为uft-8  html 为ANSI 不会出现失效的情况。

5. li在IE中底部空行的BUG。

IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。

解决方法:

1. 在li a 样式中加入zoom:1;

2. 在li 样式中加入display:inline ;

3. 将<li>标签写成一行;

4. 在li a 样式中加入width:100%或者一个宽度值;

6. 父级使用padding后子元素绝对定位的BUG。

在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

解决方法:

给外层加宽度或zoom:1

7. display:none引起的3像素的BUG

解决方案1:

将最后一个div加一个margin-right:-3px。

如:<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>

解决方案2:

将display: none的div换一个形式隐藏。

如:<divstyle="position:absolute; visibility: hidden "></div>

8. IE6的图片3px问题

IE 6 中 ,DIV 使用背景图片(或直接插入图片在DIV中)的时候,在图片的下端会出现一条空白间隔,经测量,刚好是 3px .

解决:

IE6默认字号是12pt,默认行高是normal。

1. 给DIV加上:font-size: 0px;

2. 设置img为“display:block;”。

3. 即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。

4.设置图片的浮动属性,“#sub img {float:left;}”。

5.取消图片标签和其父对象的最后一个结束标签之间的空格,这种方法适用范围比较窄,只限于父对象中只包含一个图片对象,而且和父对象的结束标签之间不能有任何空隙。

9. IE6双倍浮动BUG

解决:

解决办法是加上display:inline;

10. IE6的著名3px BUG(断头台bug):

两个层,一个浮动,一个不浮动,把浮动的一个放在不浮动层中,你会发现两个之间有点间隙,宽度为3px。这个问题是最让人头疼的问题了。

解决方法:

1、所有的层都浮动 把右边那个层也设置成浮动层就可以消除这可恶的3px间隔

2、给左边的层,应用margin-right:-3px;,同样可解决IE 3px bug。

11. Ie6图片导致行距无效

解决方法:对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身高度)/2px 0)

12. IE6使用滤镜使PNG图片透明后,容器内链接失效的问题。

解决方法是为链接定义一个相对定位属性。position:relative

13. 禁用文本框中文输入法的通用方法。

<div>验证码<input type="text" style="ime-mode:disabled"/></div>        

IE可以用ime-mode:disabled,firefox3也开始支持IE的这一私有属性

分类: CssHtml

标签: IE6Bug

冰川勇者卡酥:

整理东西时整理出一个U盘,找到了大半年前画的台历图感觉略傻逼

既然完售了就腿个小图,纪念一下,这辈子都不会再有这样的耐心勾线了

懒得打tag

换了电脑后以前好多图都找不到了