来一发CSS教程:定位属性在元素中的层级干系
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。网页制造poluoluo文章简介：定位属性在元素中的层级干系.
在如今项目产物的前端开辟中跟着交互的增加，再加上html布局的语义化请求，元素的层级干系更加主要了，常常页面会呈现页面某些元素会被其他元素粉饰，良多时分我们经由过程position:relative或position:absolute，及z-index值来改动元素的层级，可是z-index过量或其值假如没有充实思索的话，元素的层级干系会十分庞大。我这里只总结了position:relative和position:absolute在兄弟元素中的一些层级干系，有漏掉大概不敷的中央，接待人人留言增补和匡正。
注重：这里把position:static这个默许的定位属性值批准以为没有定位，position:relative、position:absolute和position:fixed都以为是有定位。position:fixed在ie6下未撑持，以是本位不做实例，在其他扫瞄器下一样合用。
1、在没有定位属性的兄弟元素中，一样平常在html布局上面的元素层级高于布局下面的元素。
大概表达不分明，看一段代码吧：
<divstyle="width:400px;height:200px;background:#000;color:#FFF">布局下面的元素:width:400px;height:200px;<br/>这里玄色的可见高度是150px,另有50px被白色的元素遮罩了(margin-top:-50px)。</div><divstyle="width:500px;height:100px;background:red;margin-top:-50px;color:#FFF">布局上面的元素:width:500px;height:100px;</div>如图显现：
=====================支解线===========================
在了看一个相似的例子：
<divstyle="width:400px;height:200px;background:#000;color:#FFF;margin-bottom:-110px;">布局下面的元素:width:400px;height:200px;<br/>这里玄色的可见高度加起来是100px,另有100px被白色的元素遮罩了。</div><divstyle="width:500px;height:100px;background:red;color:#FFF">布局上面的元素:width:500px;height:100px;</div>如图显现：
这两个例子充实申明了一样平常情形下：没有定位的兄弟元素中，在html布局上面的元素层级高于布局下面的元素。
二，兄弟元素中有定位属性的元素层级高于没有这两个属性的其他兄弟元素。
看一个在布局下面元素上加position:absolute例子，这个大概人人很经常使用：
<divstyle="width:400px;height:200px;background:#000;color:#FFF;position:absolute">布局下面的元素:width:400px;height:200px;<br/>这里玄色的可见高度加起来是200px,白色的元素被遮罩了。</div><divstyle="width:500px;height:100px;background:red;color:#FFF">布局上面的元素:width:500px;height:100px;</div>如图显现：
=====================支解线===========================
看一个在布局下面元素上加position:relative例子，这个能够用来做良多事变，出格是选项效果，另有元素不想离开文档流的时分：
<divstyle="width:400px;height:200px;background:#000;color:#FFF;position:relative">布局下面的元素:width:400px;height:200px;<br/>这里玄色的可见高度加起来是200px,白色的元素的50高度被遮罩了。</div><divstyle="width:500px;height:100px;background:red;margin-top:-50px;color:#FFF">布局上面的元素:width:500px;height:100px;</div>如图显现：
3、兄弟元素中有position:relative和position:absolute定位属性的元素，布局上面的元素层级高于布局下面的元素，可是有z-index设置时，z-index值年夜者居上。
看一个在例子：
<divstyle="width:500px;height:140px;background:#000;position:relative;z-index:100"></div><divstyle="position:absolute;top:0;width:600px;height:120px;background:red;z-index:99"></div>4、非兄弟元素，恣意一者或其祖元素具有静态定位时，同时各自向上寻觅静态定位的祖元素，并分离从中拿出具有第一流其余祖元素（或其自己）举行对照。
1.子元素的z-index不管多年夜，父元素年夜者居上，如图：
2.父元素居下，子元素也能够居上，如图：
大概看这段代码：
<divstyle="width:800px;height:160px;background:#CDCDCD"><divstyle="width:500px;height:140px;background:#000;position:relative;z-index:100">这个在最下层</div><divstyle="position:absolute;top:0;width:600px;height:120px;background:red;z-index:99"></div></div><divstyle="background:#00F;width:600px;height:130px;margin-top:-50px"></div>3.分离以上两点，看个加倍庞大的，如图：
有漏掉大概不敷的中央，接待人人留言增补和匡正。
</p>
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
页:
[1]