来一发DIV+CSS制造网页之怎样设置z-index
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。破洛洛文章简介：貌似良多同砚对为何这个div在下层，谁人div鄙人层、不管怎样设置z-index都没法居上的成绩纠结抓狂、上吐下泻、恶心掉眠、郁郁而终，以致不敢随便利用层的叠加。但层的叠加效果，在交互计划中却一再呈现，以是我们必需把握它，要把握它，就要把握其纪律。
[介入测试的扫瞄器：IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[操纵体系：Windows]
貌似良多同砚对为何这个div在下层，谁人div鄙人层、不管怎样设置z-index都没法居上的成绩纠结抓狂、上吐下泻、恶心掉眠、郁郁而终，以致不敢随便利用层的叠加。但层的叠加效果，在交互计划中却一再呈现，以是我们必需把握它，要把握它，就要把握其纪律。
起首明白几点在文中所必要用到的观点：
[*]静态定位：position:static（为position属性的默许值）。
[*]静态定位：position:relative或position:absolute或position:fixed。
[*]祖元素：恣意包括该元素的元素。
[*]父元素：间接包括该元素的祖元素。
[*]平辈元素：具有配合的父元素的元素。
注：这些观点为作者自界说，仅用于本文。
援用:
关于平辈元素是个十分关头的词，这里还必要具体注释一下。
<div>
<div></div>
<divid="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<divid="f">
<div></div>
<divid="b"></div>
<divid="c"></div>
<div></div>
<div></div>
<div></div>
</div>
在这个例子中，div#a与div#b并非“平辈元素”，只要像div#b和div#c如许具有一样父体div#f的的元素才干叫“平辈元素”。
援用停止
接上去看看这五条法例：
法例一：平辈元素定位体例不异，且无z-index设置时，html靠后者居上。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>法例一：平辈元素定位体例不异，且无z-index设置时，html靠后者居上。</title></head><styletype="text/css">div{font:12px/1.5arial;}divstrong{color:#fff;background:#036;display:inline-block;}h3strong{color:#f00;}/*---界说方块形状---*/.div1,.div2{height:70px;width:150px;background:#cff;border:1pxsolid#036;}.grandDiv1,.grandDiv2{padding:10px;border:1pxsolid#060;width:174px;background:#cf9;}.parentDiv1,.parentDiv2{padding:10px;border:1pxsolid#f06;width:152px;background:#fcf;}/*---界说方块偏移地位、笔墨地位---*/.grandDiv2{margin-top:-50px;margin-left:95px;}.parentDiv2{margin-top:-40px;margin-left:85px;}.div2{margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}.grandDiv2.parentDiv2,.grandDiv2.div2,.parentDiv2.div2{margin:0;}</style><body><h3>法例一：平辈元素定位体例不异，且无z-index设置时，html靠后者居上。</h3><divclass="div1">.div1{position:static}</div><divclass="div2">.div2{position.static}</div><divclass="div1"style="position:relative;">.div1{position.relative}</div><divclass="div2"style="position:absolute;">.div2{position.absolute}</div></body></html>
破洛洛文章简介：貌似良多同砚对为何这个div在下层，谁人div鄙人层、不管怎样设置z-index都没法居上的成绩纠结抓狂、上吐下泻、恶心掉眠、郁郁而终，以致不敢随便利用层的叠加。但层的叠加效果，在交互计划中却一再呈现，以是我们必需把握它，要把握它，就要把握其纪律。
法例二：平辈元素同为静态定位时，且有z-index设置时，z-index值年夜者居上。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>法例二：平辈元素同为静态定位时，且有z-index设置时，z-index值年夜者居上。</title></head><styletype="text/css">div{font:12px/1.5arial;}divstrong{color:#fff;background:#036;display:inline-block;}h3strong{color:#f00;}/*---界说方块形状---*/.div1,.div2{height:70px;width:150px;background:#cff;border:1pxsolid#036;}.grandDiv1,.grandDiv2{padding:10px;border:1pxsolid#060;width:174px;background:#cf9;}.parentDiv1,.parentDiv2{padding:10px;border:1pxsolid#f06;width:152px;background:#fcf;}/*---界说方块偏移地位、笔墨地位---*/.grandDiv2{margin-top:-50px;margin-left:95px;}.parentDiv2{margin-top:-40px;margin-left:85px;}.div2{margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}.grandDiv2.parentDiv2,.grandDiv2.div2,.parentDiv2.div2{margin:0;}</style><body><h3>法例二：平辈元素同为静态定位时，且有z-index设置时，z-index值年夜者居上。</h3><divclass="div1"style="position:relative;z-index:2;">.div1{position.relative;z-index:2}</div><divclass="div2"style="position:relative;z-index:1;">.div2{position.relative;z-index:1}</div></body></html>
法例三：平辈元素定位体例分歧时，静态定位居上。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>法例三：平辈元素定位体例分歧时，静态定位居上。</title></head><styletype="text/css">div{font:12px/1.5arial;}divstrong{color:#fff;background:#036;display:inline-block;}h3strong{color:#f00;}/*---界说方块形状---*/.div1,.div2{height:70px;width:150px;background:#cff;border:1pxsolid#036;}.grandDiv1,.grandDiv2{padding:10px;border:1pxsolid#060;width:174px;background:#cf9;}.parentDiv1,.parentDiv2{padding:10px;border:1pxsolid#f06;width:152px;background:#fcf;}/*---界说方块偏移地位、笔墨地位---*/.grandDiv2{margin-top:-50px;margin-left:95px;}.parentDiv2{margin-top:-40px;margin-left:85px;}.div2{margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}.grandDiv2.parentDiv2,.grandDiv2.div2,.parentDiv2.div2{margin:0;}</style><body><h3>法例三：平辈元素定位体例分歧时，静态定位居上。</h3><divclass="div1"style="position:relative;">.div1{position.relative}</div><divclass="div2">.div2{position.static}</div><divclass="div1">.div1{position.static}</div><divclass="div2"style="position:absolute;">.div2{position:absolute}</div></body></html>
法例四：非平辈元素，恣意一者及其祖元素不具有静态结构时，html靠后者居上。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>法例四：非平辈元素，恣意一者及其祖元素不具有静态结构时，html靠后者居上。</title></head><styletype="text/css">div{font:12px/1.5arial;}divstrong{color:#fff;background:#036;display:inline-block;}h3strong{color:#f00;}/*---界说方块形状---*/.div1,.div2{height:70px;width:150px;background:#cff;border:1pxsolid#036;}.grandDiv1,.grandDiv2{padding:10px;border:1pxsolid#060;width:174px;background:#cf9;}.parentDiv1,.parentDiv2{padding:10px;border:1pxsolid#f06;width:152px;background:#fcf;}/*---界说方块偏移地位、笔墨地位---*/.grandDiv2{margin-top:-50px;margin-left:95px;}.parentDiv2{margin-top:-40px;margin-left:85px;}.div2{margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}.grandDiv2.parentDiv2,.grandDiv2.div2,.parentDiv2.div2{margin:0;}</style><body><h3>法例四：非平辈元素，恣意一者及其祖元素不具有静态结构时，html靠后者居上。</h3><divclass="parentDiv1">.parentDiv1{position:staitc}<divclass="div1">.div1{position:staitc}</div></div><divclass="parentDiv2"><divclass="div2">.div2{position:staitc}</div>.parentDiv2{position:staitc}</div><divclass="grandDiv1">.grandDiv1{position:staitc}<divclass="parentDiv1">.parentDiv1{position:staitc}<divclass="div1">.div1{position:staitc}</div></div></div><divclass="grandDiv2"><divclass="parentDiv2"><divclass="div2">.div2{position:staitc}</div>.parentDiv2{position:staitc;}</div>.grandDiv2{position:static;}</div></body></html>
破洛洛文章简介：貌似良多同砚对为何这个div在下层，谁人div鄙人层、不管怎样设置z-index都没法居上的成绩纠结抓狂、上吐下泻、恶心掉眠、郁郁而终，以致不敢随便利用层的叠加。但层的叠加效果，在交互计划中却一再呈现，以是我们必需把握它，要把握它，就要把握其纪律。
法例五：【主要】非平辈元素，恣意一者或其祖元素具有静态定位时，同时各自向上寻觅静态定位的祖元素，并分离从中拿出具有第一流其余祖元素（或其自己）举行对照。
情形1：子元素的z-index不管多年夜，父元素年夜者居上。
情形2：父元素居下，子元素也能够居上。
情形1、情形2分离扩大对照。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>法例五：非平辈元素，恣意一者或其祖元素具有静态定位时，同时各自向上寻觅静态定位的祖元素，并分离从中拿出具有第一流其余祖元素（或其自己）举行对照。</title></head><styletype="text/css">div{font:12px/1.5arial;}divstrong{color:#fff;background:#036;display:inline-block;}h3strong{color:#f00;}/*---界说方块形状---*/.div1,.div2{height:70px;width:150px;background:#cff;border:1pxsolid#036;}.grandDiv1,.grandDiv2{padding:10px;border:1pxsolid#060;width:174px;background:#cf9;}.parentDiv1,.parentDiv2{padding:10px;border:1pxsolid#f06;width:152px;background:#fcf;}/*---界说方块偏移地位、笔墨地位---*/.grandDiv2{margin-top:-50px;margin-left:95px;}.parentDiv2{margin-top:-40px;margin-left:85px;}.div2{margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}.grandDiv2.parentDiv2,.grandDiv2.div2,.parentDiv2.div2{margin:0;}</style><body><h3>法例五<strong>（主要）</strong>：非平辈元素，恣意一者或其祖元素具有静态定位时，同时各自向上寻觅静态定位的祖元素至共有的祖元素的下一级为止，并分离从中拿出具有第一流其余祖元素（或其自己）举行对照。</h3><p>情形1：子元素的z-index不管多年夜，父元素年夜者居上。<p><divclass="parentDiv1"style="position:relative;z-index:2;">.parentDiv1{position:relative;<strong>z-index:2</strong>}<divclass="div1">.div1{position:static}</div></div><divclass="parentDiv2"style="position:relative;z-index:1;"><divclass="div2"style="position:relative;z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>.parentDiv2{position:relative;<strong>z-index:1</strong>}</div><p>情形2：父元素居下，子元素也能够居上。<p><divclass="parentDiv1">.parentDiv1{position:staitc}<divclass="div1"style="position:relative;">.div1{position:relative}</div></div><divclass="parentDiv2"><divclass="div2">.div2{position:staitc}</div>.parentDiv2{position:staitc}</div><p>情形1、情形2分离扩大对照。<p><divclass="grandDiv1"style="position:relative;z-index:3;">.grandDiv1{position:relative;<strong>z-index:3</strong>}<divclass="parentDiv1">.parentDiv1{position:staitc}<divclass="div1"style="position:relative;z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div></div></div><divclass="grandDiv2"><divclass="parentDiv2"style="position:relative;z-index:4;"><divclass="div2">.div2{position:staitc}</div>.parentDiv2{position:relative;<strong>z-index:4</strong>}</div>.grandDiv2{position:static;}</div></body></html>
援用:
实在前四点都是基本，只要第五点对照难于了解，这里具体注释一下：
<divid="ab"style="position:absolute;">
<divid="a"style="position:relative;z-index:100;">
<divid="a_inner1">
<divid="a_inner2">
<divid="a_inner3"style="position:relative;z-index:98;">
<divid="a_inner4">
<divid="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<divid="b">
<divid="b_inner1">
<divid="b_inner2">
<divid="b_inner3"style="position:relative;z-index:99;">
<divid="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的地位来举行对照。
援用停止
固然，偶然候还存在惯例，好比flash、好比ie6中的select没法遮住，这些都属于非常情形，人人能够本人搜刮一下相干文章。
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
页:
[1]