绝对定位相对定位.docVIP

语法position : static | absolute | fixed | relative? 绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 无定位设置，对象遵循HTML定位规则。一般是子级不会跑出父级外边去（子级没有使用负边界情况），子级一般是靠在父级左上角的，父级放在最下层。 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无定位设定,对象遵循HTML定位规则/title style type=text/css !-- body { margin:0px; font-size: 9pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; height: 200px; width: 200px; } .box2 { background-color: #66CC66; height: 100px; width: 100px; } -- /style /head body div class=box1 div class=box2/div /div /body /html (2) 给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。下面实例中虽然给box2设定了定位属性position: absolute，但是如果没有指定其中一个方位定位值top: 0px，定位是不发生作用的. (3) 相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。 !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=gb2312 / title相对定位对象会占据原有位置/title style type=text/css !-- body { margin:0px; font-size: 9pt; line-height:12pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #3CF; height: 200px; width: 200px; } .box2 { background-color: #6C6; height: 100px; width: 100px; position: relative; float: left; top:-120px; } -- /style /head body div class=box1 div class=box2/div [相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。/div /body /html (4) 相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一