预览加载中，请您耐心等待几秒...

绝对定位&相对定位.doc

预览
1/5
2/5
3/5
4/5
5/5

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

语法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> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>无定位设定,对象遵循HTML定位规则</title> <styletype="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> <divclass="box1"> <divclass="box2"></div> </div> </body> </html> (2)给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。下面实例中虽然给box2设定了定位属性position:absolute，但是如果没有指定其中一个方位定位值top:0px，定位是不发生作用的. (3)相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>相对定位对象会占据原有位置</title> <styletype="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> <divclass="box1"> <divclass="box2"></div> [相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div> </body> </html> (4)相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理