博客园_无声守候

css层的定位position、absolute、relative层叠加的五条叠加法则

2011-03-03T07:56:00Z

css层的定位position、absolute、relative层叠加的五条叠加法则

貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。

首先明确几点在文中所需要用到的概念:

静态定位：position:static（为position属性的默认值）。
动态定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含该元素的元素。
父元素：直接包含该元素的祖元素。
同辈元素：拥有共同的父元素的元素。

注：这些概念为作者自定义，仅用于本文。

接下来看看这五条法则:

法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。

法则二：同辈元素同为动态定位时，且有z-index设置时，z-index值大者居上。

法则三：同辈元素定位方式不同时，动态定位居上。

法则四：非同辈元素，任意一者及其祖元素不具备动态布局时，html靠后者居上。

法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

情况1：子元素的z-index无论多大，父元素大者居上。

情况2：父元素居下，子元素也可以居上。

情况1、情况2结合扩展比较:

引用:
其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

<div id="ab" style="position:absolute;"> <div id="a" style="position:relative; z-index:100;"> <div id="a_inner1"> <div id="a_inner2"> <div id="a_inner3" style="position:relative; z-index:98;"> <div id="a_inner4"> <div id="a_inner5"> </div> </div> </div> </div> </div> </div> <div id="b"> <div id="b_inner1"> <div id="b_inner2"> <div id="b_inner3" style="position:relative; z-index:99;"> <div id="b_inner4"> </div> </div> </div> </div> </div> </div>

在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。
到它们所共同拥有的祖元素 div#ab的下一级为止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4 的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有动态定位的元素有：div#b_inner3。
然后再拿出最高级进行比较：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。

本文链接

IE6 不支持PNG问题

2010-03-31T07:43:00Z

一般写CSS的都知道IE6下不支持透明的PNG格式图片，平常我们的最简单解决办法是把透明的PNG图改成GIF格式的。

今天偶然看到一个关于专门的ie6 css hack：
img {_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/recent_deals_price_tag.gif.png', sizingMethod='image');}

但是有一个缺点：不可循环平铺

例子：
.png{
width: XXpx;
height: XXpx;
background: url(XX.png) !important;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='XX.png');
}

备

本文链接

IE8的CSS hack

2010-03-18T03:47:00Z

CSS兼容性一直是大家头疼的问题，IE6、IE7和FF已经让大家够呛，而IE8正式版发布以来，一直在找一种区别IE8正式版的方法。

1.区别IE和非IE浏览器

#tip {
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}

2.区别IE6,IE7,IE8,FF

【区别符号】：「\9」、「*」、「_」

#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE系列浏览器可读「\9」（也看到有用"9的 margin:0px auto“9;），而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

汇总下IE各版本的css hack。

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

本文链接

2010年暴强淫才语录

2010-03-11T02:26:00Z

1:
楼主：李宇春和芙蓉姐姐同时掉水里，你手里有一块砖，你砸谁？
暴强回复：谁救砸谁。
2:
楼主：我把我家的狗给揍了！地震它也不告诉我，平时叫得那么欢，刚才地震时竟像没事似的在窝里睡觉！
回复：唉，毕竟不是亲生的……
3:
楼主：请用一句话形容中国国家地震台。
回复：事后诸葛亮，事前猪一样！
4:
论坛楼主：昨晚遛狗时俺们家大藏獒和小树林边一秃毛野狗咬起来。干！没想到藏獒竟然大败给一条草狗！！！
论坛沙发：****，爷秃之前，他们都叫我狮子！
5:
楼主：上大学我跳过课、挂过科、甩过人、被甩过、打过架、记过过、破过处……哎，能干的我都干过了～
回复：你死过吗？
6:
楼主：我喜欢上了一个比我小6岁的女孩，还在上初中，真是造孽啊。
暴强回复：把喜欢两字去掉才真是造孽。
7:
楼主：大家都来讲一个开头KB，中间好笑，结局悲惨的故事。譬如从前有个鬼，放了个屁，然后死了。
回复：遇到芙蓉姐姐，爱上芙蓉姐姐，娶了芙蓉姐姐……
8:
涯楼主：每天对着单位那群白痴说话让我感到前途很渺茫……
回复：幸福吧你～因为对牛弹琴并不可怕，可怕的是一群牛每天对着你弹琴！
9:
楼主：深圳南头一卖菠萝的女摊贩情急之下咬下城市管理者叔叔的小JJ……
回复：哼！你不让我生活，我就不让你享受生活！！！
10:
楼主：其实牛顿只是幸运地发现万有引力定律，要是早生三百年，我也可以！
回复：的确是幸运儿，因为砸到他脑袋上的是苹果，而砸到可怜楼主脑袋上的不是榴莲就是椰子……
11:
楼主：是被人叫大叔惨还是叫弟弟惨？
暴强回复：大叔你弟弟出来了。
12:
楼主：城市管理者增加新武器来抓流浪狗！
暴强回复：本是同根生，想煎何太急。
13:
楼主：为什么越来越多人不想要小孩呢？
暴强回复：北京派来的高官说了，要从娃娃抓起。
14:
楼主：今天见男网友对方一直暗示想上床，想问：难道现在网友见面就是为了上床？
暴强回复：网友见面不上床？你开什么玩笑，大家都这么忙。
15:
楼主：一学生，成绩年年倒数第一，常与人打架，按领导要求老师想给学生好听一点的期末评语，怎么写啊？
暴强回复：该生成绩稳定，动手能力强。
16:
楼主：通过海南矿泉水喝死人事件，可以看到中国的食品安全堪忧，矿泉水也能喝死人？不是有QS标志吗？
暴强回复：弱弱的问一下，QS是不是去死的意思？
17:
楼主：男人你要李宇春还是章子怡？
暴强回复：一个公鸡，一个野鸡，都不选
18:
楼主：养条狗和养一个男人哪个合算？
暴强回复：大婶，即使你能把男人当狗使，但你敢把狗当男人使不？
19:
楼主：老婆生了个女娃，非常可爱，求各位帮爱女起个有气势的名字，鄙人姓成。
回复：成鸡思汉。
20:
论坛楼主：我有一百万，想买一辆车，大家给个建议吧。
论坛回复：你可以卖30辆QQ，组个车队开，一会排成S型，一会排成B型。
21:
论坛楼主：王小丫跟陈章良结婚，请用四个字评论。
论坛回复：丫从良了！
22:
论坛楼主：大家说我长得像不像伍佰？
论坛回复：只有一半像！（二百五？？！！）
23:
楼主：给我一个女人，我就能创造出一个民族！
回复：嗯，给你一头母猪，明年的肉价就能下跌！
24:
论坛楼主：大家猜猜我是哪个国家的混血儿^_^
论坛回复：中国人＋变形金钢！
25:
论坛楼主：女友总说自己胸小，我觉得还可以啊，请论坛GG们帮忙鉴定一下～
论坛沙发：后背上长俩青春痘！
26:
论坛楼主：假如我有一亿人民币，我就可以贷款在汤臣一品买房子了！
论坛回复：嗯，不过你还要先借钱交物业费～
27:
论坛楼主：他今天山盟海誓说我是他生命中的一部分，我是他身体中的一部分，如果没了我，他就活不下去啦~
论坛沙发：我的前男友也是这么说的，后来我才知道，我是他盲肠、阑尾、仔耳、六指这类可有可无的玩意儿！
28:
论坛楼主：老娘我简直太有钱了，我该给保姆买辆什么车呢？
论坛回复：那就要看她跟你老公发展到什么关系了～
29:
论坛楼主：该死的理发店把我头剪坏了！大家出点损招，要求破坏性越大越好，动静越小越好，因为是我一个人去。
论坛地下室：半夜三更，月黑风高，静静地、轻轻地，一个人吊死在理发店门口……
30:
论坛楼主：我得了健忘症怎么办？
论坛回复：那岂不是很爽？每天早晨醒来发现睡在自己身旁的都是不同的女人~
31:
论坛楼主：你小时候曾幻想长大以后什么样的场景会让你在众人面前出尽了风头？
论坛板凳：挑一担粪上街，看谁不顺眼就迎面给他泼一瓢！
32:
论坛楼主：为什么pol.ice抓坏人时都要鸣警笛？难道不怕坏人老大远就听到跑了？
论坛沙发：上级单位来检查之前一般都会事先通知下级单位的～
33:
论坛楼主：为什么生下的孩子要跟父亲一个姓？
论坛沙发：因为取款机里吐出的钱归插卡人所有。
34:
论坛楼主：帅有个屁用——到头来还不是被卒吃掉！
论坛回复：帅有士陪，有炮打，有马骑，有车坐，有相暗恋……帅怎么不好？！！
35:
论坛楼主：征集骂人最狠且不露脏字的一句话。
论坛回复31：你妈生你的时候是不是把人扔了，把胎盘养大了？
36:
论坛楼主：为什么中国访问日本，日本方面比较冷淡，甚至机场连欢迎标语都没挂？
论坛沙发：怎么挂？热烈欢迎中国老朋友来日？　　
37:
论坛楼主：你们女人大夏天的戴胸罩不热吗？
论坛回复：我们不带你们会热……
38:
论坛楼主：我新买了一处庄园，有多大说出来吓死你——我开车绕一圈足足用了两个半小时！！！
论坛沙发：嗯，以前我也有这么一辆破车～

本文链接

妈妈之歌 The Mom Song 中文字幕

2010-01-25T07:52:00Z

妈妈之歌 The Mom Song 中文字幕

CSS书写顺序建议及CSS HACK(FF&IE兼容)

2010-01-22T09:20:00Z

CSS书写顺序建议及CSS HACK(FF&IE兼容)

2009超强流行词汇

2009-12-17T07:13:00Z

2009超强流行词汇

国务院办公厅发布2010年部分节假日安排通知

2009-12-08T08:37:00Z

国务院办公厅发布2010年部分节假日安排通知

9月18日国庆庆典演练期间公交地铁适时调整运营方案

2009-09-18T02:32:00Z

9月18日国庆庆典演练期间公交地铁适时调整运营方案

一些IE6 IE7 IE8 FF的CSS hack

2009-09-09T01:58:00Z

一些IE6 IE7 IE8 FF的CSS hack