来一发CSS教程:元素层叠级别及z-index

Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
原文：http://rong179.blogbus.com/logs/24966909.html
声明
定位元素：position属性值设置除默许值static之外的元素，包含relative，absolute，fixed。
平台：win/IEwin/FF
z-index:
用来断定定位元素在垂直于显现屏偏向（以下称为Z轴）上的层叠按次
值：　　　auto|整数|inherit
默许：　　auto
合用于：　定位元素
承继性：　no
了解stackingcontext
每一个box都回属于一个stackingcontext,它是元素在z轴偏向上定位的参考。根元素构成rootstackingcontext，其他stackingcontext由定位元素设置z-index为非auto时发生。如#div1{position:relative;z-index:0;}便可使id=div1的元素发生stackingcontext。stackingcontext和containingblock并没有一定接洽。
了解stacklevel
在一个stackingcontext中的每一个box，都有一个stacklevel（即层叠级别，以下一致用stacklevel），它决意着在统一stackingcontext中每一个box在z轴上的显现按次。统一stackingcontext中，stacklevel值年夜的显现在上，stacklevel值小的显现鄙人，统一stacklevel的遵守后发先至的准绳（back-to-front）。分歧stackingcontext中，元素显现按次以父级的stackingcontext的stacklevel来决意显现的前后情形。于本身stacklevel有关。注重stacklevel和z-index并非一致观点。（将在后文渐渐了解）
stacklevel划定规矩
每一个stackingcontext中可包括块级（block）元素、内联（行内inline）元素，另有设置float属性的元素、定位元素等等他们在统一父级stackingcontext中的显现按次是如何的？即stacklevel是如何的呢？好比一个块级元素和内联元素产生层叠的话谁会在下面呢？是否是谁在前面谁就在下面呢？
依据w3c关于stacklevel的先容能够得出以下stacklevel划定规矩
每一个stackingcontext都包含以下stacklevel（后发先至）:

• 父级stackingcontext的背景、界限
  
• z-index值为负值的定位元素（值越小越鄙人）
  
• 文本流中非定位的、block块级子元素
  
• 文本流中非定位的、float浮动子元素
  
• 似乎能发生stackingcontext的inline元素
  不然，inline元素的stacklevel将在block元素之前。
  
• z-index：auto/0的定位元素
  
• z-index值为正的定位元素（值越年夜越在上）
  

以上stacklevel在扫瞄器实行情形:
firefox3.0下测试完整符合，firefox2.0下稍有分歧即：“z-index值为负值的定位元素”在“父级stackingcontext的背景、界限”之前。
ie6.0和7.0中：inline元素的stacklevel位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于统一级。


FF下测试
测试页面：demo01.html（请分离在FF3.0和FF2.0中翻开）
代码申明：
由前所述，假如元素的stacklevel同级则后发先至；元素的stacklevel高，这不管代码在文档中地位怎样都显现在下面，即便代码在最后面；假如元素的stacklevel低，不管代码地位怎样都将显现鄙人面，即便代码在最初面。
我们就依据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，假如我把“float元素”的代码写在“block元素”的后面，且实践显现为：“float元素”在“block元素”之上。便可证实："float元素”的stacklevel级别较“block元素”高。由于假如同级,大概“block元素”的stacklevel高都应是“block元素”显现在上。
依据以上，依据尺度中的按次，把stacklevel高的元素代码写在后面，stacklevel低的代码写在前面，假如显现了局是：代码在后面的元素显现在上方，即证实下面的stacklevel划定规矩。
测试了局：
在FF3.0中了局和尺度按次分歧。FF2.0中“z-index值为负值的定位元素”在父级stackingcontext的背景上面。（注重ff2.0的这个特别性）
IE下测试
测试页面：demo02.html(请在IE下扫瞄)
代码申明：
此代码也是依据下面的测试头脑，但因为inline元素在ie中的特别性，把inline的代码写在了前面，现实证实结论是准确的。关于“block元素”和“float元素”按次人人能够互换按次测试。
测试结论：
IE下（不管ie6.0大概ie7.0）“float元素”和“block元素”属统一stacklevel，而“inline元素”较其stacklevel低。
注释：
“float元素”，“z-index：auto的定位元素”似乎发生了新的stackingcontext，但其真正能发生新的stackingcontext的儿女任按其父级stackingcontext定位。（但IE中“z-index：auto的定位元素”
会具有z-index值0，发生一个新的stackingcontext，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中似乎能发生新的stackingcontext，而在IE中则不克不及。
至此stacklevel划定规矩内容已终了，如今应当能了解stacklevel和z-index的分歧。stacklevel来决意这一个stackingcontext中各元素在z轴上的显现按次，关于统一stacklevel的定位元素才由z-index进一步决意显现序次。
一些成绩的注释
怿飞版主在《z-index在IE中的利诱》一文中最初提到的成绩：
演示地点：demo03.html
以为：
解惑：IE扫瞄器仿佛给body元素默许了一个绝对定位属性（position:relative）。
真是如许吗？
演示地点：demo04.html
剖析：
box1显现在body的下方，依据下面的stacklevel划定规矩，IE中，假如body默许了一个地位属性，即body是其父级stackingcontext，box1应显现在其上方，现实却不是如许。并且当我们给body加上position：relative今后，显现效果和stacklevel划定规矩分歧。以是body并没有默许地位属性。
那为何负值的定位元素在IE和FF下显现纷歧致呢？
ie中依据stacklevel划定规矩：z-index为负的定位元素的stacklevel比父级stackingcontext（此处是rootstackingcontext）高，显现在其上方。故box1在ie中能显现。ff3.0和尺度分歧，也能显现。人人能够试一下。
ff2.0中因为那条特别的stacklevel，即z-index为负的定位元素的stacklevel比父级stackingcontext（此处是rootstackingcontext）低，以是显现在rootstackingcontext下方。故不克不及瞥见。
别的，下面的代码中加上opacity那条后，在ff2.0中便可显现了。这又是甚么缘故原由呢？
推想：在火狐中假如给元素设置opacity属性（1除外），即会发生新的stackingcontext。
下面加上opacity属性后在ff2.0中可显现box1在body下，ff3.0box1在body上，（能够依据下面的stacklevel划定规矩本人剖析）切合推想。
在w3c的申明中也证实这点
援用：
InfuturelevelsofCSS,otherpropertiesmay
introducestackingcontexts,forexampleopacity
[CSS3COLOR].
总结：
在一个stackingcontext中元素的z-轴显现按次，由元素所处的stacklevel决意。关于统一stacklevel的定位元素由z-index的巨细进一步决意显现序次。

• ie中给元素设置position属性（static除外）可发生新的stackingcontext
  
• ff中给元素设置opacity属性（1除外）可发生新的stackingcontext
  

除此以外（大概设置其他属性也会发生新的stackingcontext，但还不晓得）只要定位元素设置了z-index(auto除外)才会发生新的stackingcontext，子元素将依照新的stackingcontext，定位。

更好的控制页面布局。不用多说。

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。