Web前端之网页导航----126邮箱(关于position)

原图

我做的

这里主要讲讲position:absolute;和position:relative;

①这里先看两个标签<header />，<nav />,他们是html5标签，<header> 标签定义文档的页眉（介绍信息），<nav> 标签定义导航链接的部分。我觉得html5也没什么，就是标签更语义化了？我不懂，乱说的，呵呵。

②126logo和右边的“你的专业单子邮箱”都是用图片代替文字，右边的使用background-image实现的，还有右边的

文字是用visibility: hidden;异曲同工吧！

③一些小细节，<a>标签的title属性可以让你鼠标在图片上时显示文字，<img>的alt属性是在图片没出来时显示的

文字。免费邮那几个之间距离是用margin-left，值得一提的是以前在创新工场导航中用到<li>，为了达到文字在同

行的效果，就是用了display: inline-block;（关于它的作用我之前提到过，不在赘述），但是为什么在126中没用

呢！，因为创新工场的导航是面还有图片，必须是设置高宽，以容纳上面的图片，而在126中只是普通的行内元素就

可以解决！所以在能少用代码的时候就少用!

④之前做的导航都用到了position，因为这个网页导航简单，所以主要说这个了！

设置了position: relative/absolute 都可以改变元素在文档中方的位置，可激活left，top，right，bottom和z-index属性（默认情况下，这些属性未激活，设置也无效）

先来说些理论，一般我们的文字都在文档流中，也就是（z-index: 0）,设置position让会让文档浮动起来！，也就是z-index>0，他就会改变正常的文档流！

     先来说说position：relative；

它用保留在自己在z-index:0层的占位，left，top，right，bottom值都是相对于自己在z-index:0层的位置。虽然

它的实际位置会因设置了left等而偏离原来在文档流中的位置，但对其他仍然在z-index：0层元素不会造成影响！

而absolute完全脱离了文档流，不再在index-z:0层保留占位符，其left，top等值是相对自己最近的一个设置了position:relative或absolute的祖先元素，若祖先元素都未设置，那就相对于body。

float与以上不同的是，它不会让元素上浮到另一个z-index层，它仍然让元素在z-index: 0层排列。float不能通过left等属性来准确控制元素坐标，只可left，right，它影响周围元素！

position:absolute和float会隐式改变display类型，不论之前什么类型元素（display:none除外），只要设置position: absolute，float:left/right中任意一个，都会让元素以display: inline-block的方式显示，可设置长宽，默认不占满父元素。就算我们显示地设置display：inline/bock，也仍然无效（float在IE6下的双边距bug利用添加display: include解决），但position: relative却不会隐式改变display类型！

可能大家看的有点摸不着头脑了，做些实验吧！

不知道在怎么试验，两个框框，一个大一个小，一个设置absolute，一个relative。自己慢慢摸索吧！（一个包着一个）