网页CSS排版制作-绝对和相对定位.doc

定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。班级晚会的主持人是这个班的学生，但是观众席中不要他的位置。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。Relative，CSS中的写法是：position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。body padding:20px;a color:#00f; text-decoration:none;a:hover color:#f60; position:relative; top:1px; left:1px;#layout width:600px; margin:0 auto; background:#eee; position:relative;#new position:absolute; top:-15px; left:140px; 这里是内容这里是链接这里也是内容插入DIV先写内容，在写文字连接，接着内容删除掉下图所示的提示文字输入以下文字选择“这个是链接”5个字符，在属性面板上的链接中输入 # 个符号，代表这个是链接，链接目标现在为空。新建 a:hover 伪类规则。定义为相对定位。观看效果，重新打开规则F12预览，观看鼠标移动到文字上时候相对定位偏移位置的效果。可以试着加大左移7个像素位置，F12预览，看文字重叠效果。下面加上那个新的图片动画。绝对定位：这个是内容这个是链接这个也是内容F12预览，看效果，下面对new进行绝对定位，设置：这是相对浏览器，0 0 左上角 绝对脱离了原来的文档流。设置偏移到位置为layout设置居中，设置背景色观察效果。看到这个偏移了，但是图片没有移动位置。绝对位置就是这样的。位置不动拖动浏览器进行宽度调整，位置仍然不动的。3.父容器使用相