来谈谈：CSS制造网页：position:relative
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。破洛洛文章简介：css心得之善用position:relative。
多是团体习气吧，我团体在写css款式的时分position:relative都很罕用。不到必不得以不必，由于这器材在面临IE年夜叔的时分老是会各类被推到，好比多个positon嵌套的的时分会发生相似z-index优先级的掉控，不晓得其他coder们碰着过这个成绩没？归正我是碰着不下1次了。
举个栗子以下：html代码节略写法，你懂的
ul.ppli年夜宝span年夜宝的屁屁li二宝span二宝的屁屁li三宝span三宝的屁屁从下面的代码原本没啥成绩，成绩在于给他穿上衣服(css)以后，由于一些需求，你讲li的cssposition:relative了，
那末li就傻逼了，这个时分你怎样设置li的z-index为多年夜都盖不外以后下一个li的内容。
不睬解下面表达的意义能够见下图。
css代码
.pp{width:300px;margin:50pxauto;background:#fff;height:300px;padding:10px;}.ppli{border:1pxsolid#ccc;margin-bottom:10px;height:30px;position:relative;background:#fff;z-index:9;}.ppspan{display:block;width:40px;height:40px;background:#f09;position:absolute;right:10px;bottom:-20px;z-index:10;}如图，右边是chrome下的效果，右边是IE6的效果，可见，当给li设置positon:relative后不管内里的元素设置z-index为多年夜，都改不外以后的li内容。(爷的我又把下面的字从头打了一遍==)
办理计划
从视觉下面了解，如许的情形就像AI(Illustrator)里的图层一样，一层比一层高，也像个沙箱，外部的z-index是怎样也不克不及超出下一层的z-index。
最好不要给列表型的li大概div增加position:relative，一向以来针对IE如许头疼的bug，都是以避开如许的情形来办理。(实在应当不算bug，应当是扫瞄器开辟者了解性上的分歧)。
固然另有一种举措，因为是由于下一个li设置了position挡住了前一个position的li，那末只需制止position挡住position就能够委曲完成如许的情形。以是你只必要在position:absolute的dom表面套一层div，做到不挡住前一个li中的position:absolute就能够。
别的一种办法是在特定的情形下如hover事务，如触发式弹出浮窗(显现更多信息)，
这个时分我是如许来完成，当hover的时分给li增加一个class“hover”，然后只需界说hover的时分是position:relative就能够了，如许的优点是hover的时分其他li没有position:relative，那末就没有之前的bug了。
关于初级扫瞄器能够间接写:hover乃至都能够离开js效力会更高
position:relative在:hover上的妙用
先看下图，左边如许的按钮不晓得应当会在一些效果里打仗过吧？相似向左向右的按钮，
细心察看发明按钮两头的线是共享的，可是按下往的时分色彩会变深。
完成举措良多，我通常为对个中一个按钮利用负边距，然后在:hover效果上下手脚(因为IE6只撑持a上的hover，以是一样平常都是利用a)，实在很复杂就是在hover的时分，给它设置position:relative，然后将z-index设置一个数字便可完成。
以此类推，上图中apple的导航也能够利用如许的举措来完成效果。是否是挺带感^__^
</p>
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 学Dreamweaver技术的过程其实是一个增加信心的过程。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
页:
[1]