设为首页收藏本站
开启辅助访问 切换到窄版

仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云»社区 › 软件教程 Design › Dreamweav(DW) › 来一发DIV+CSS制造网页之怎样设置z-index
返回列表 发新帖
查看: 835|回复: 6
打印 上一主题 下一主题

[DIV+CSS] 来一发DIV+CSS制造网页之怎样设置z-index

[复制链接]
海妖 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:57:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
另外如果你不是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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

破洛洛文章简介：貌似良多同砚对为何这个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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

法例三：平辈元素定位体例分歧时，静态定位居上。


运转代码框
<!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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
法例四：非平辈元素，恣意一者及其祖元素不具有静态结构时，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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

破洛洛文章简介：貌似良多同砚对为何这个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>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
援用:
实在前四点都是基本，只要第五点对照难于了解，这里具体注释一下：
<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没法遮住，这些都属于非常情形，人人能够本人搜刮一下相干文章。

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
absolute, position, relative, 制作网页, 文章

相关帖子
回复

使用道具 举报

冷月葬花魂 该用户已被删除
沙发
发表于 2015-1-17 23:51:22 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
回复 支持 反对

使用道具 举报

愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-26 22:09:21 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
回复 支持 反对

使用道具 举报

小女巫 该用户已被删除
地板
发表于 2015-2-5 01:19:54 | 只看该作者
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
回复 支持 反对

使用道具 举报

若天明 该用户已被删除
5#
发表于 2015-2-11 01:55:53 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
回复 支持 反对

使用道具 举报

简单生活 该用户已被删除
6#
发表于 2015-3-10 23:40:21 | 只看该作者
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
回复 支持 反对

使用道具 举报

飘飘悠悠 该用户已被删除
7#
发表于 2015-3-24 15:23:50 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:02

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表