网页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来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / style 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;} /style /head body div id=layout div id=newimg src=/images/new.gif //div 这里是内容a href=#这里是链接/a这里也是内容/div /body /html 插入DIV 先写内容，在写文字连接，接着内容 删除掉下图所示的提示文字 输入以下文字 选择“这个是链接”5个字符，在属性面板上的链接中输入 # 个符号，代表这个是链接，链接目标现在为空。 新建 a:hover 伪类规则。 定义为相对定位。 观看效果，重新打开规则 F12预览，观看鼠标移动到文字上时候相对定位偏移位置的效果。 可以试着加大左移7个像素位置，F12预览，看文字重叠效果。 下面加上那个新的图片动画。绝对定位： body div id=layout div id=newimg src=new.gif //div 这个是内容a href=#这个是链接/a这个也是内容/div /bod