原文地址:http://www.lightdew.com/a/wangyemeigong/249.html
时间:2013-03-25 16:59 来源:未知 作者:admin 点击: 876 次 好评度:
在制作网页的过程中,难免要使用到绝对定位,绝对定位是将一个窗口直接定位到一个坐标上,使用起来很方便,但同时,很多人在使用的时候,也产生了另外一个 问题,那就是不好控制,明明父块元素已经移动了,使用了绝对定位的子块却不跟着移动,这到底是怎么回事呢?
首先说明一下绝对定位的一个特性,那就是:使用了绝对定位的元素都已经“漂”起来了,由于它已经飘出了父块,所以,它不再受父块的控制。
且看下面的一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.outer
{
background:red;
width:500px;
height:500px;
margin:0 auto;
}
.middle
{
background:grey;
width:250px;
height:250px;
/*position:relative;*/ /*这一句是关键,子块中的绝对定位是相对于它的上一个相对定位而进行的*/
margin:50px 0 0 150px;;
}
.inner
{
background:green;
position:absolute;
left:100px;
top:20px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
test absolute
</div>
</div>
</div>
</body>
</html>
运行结果如下:
不论你如何改变父块(图中红,灰部分)的位置,绿色子块都不会改变自己的位置。那么到底如何让绿色子块能够随着父块的位置改变而改变呢,换句话说,如何让使用了绝对定位的子块与父块保持一个固定的相对位置呢?
其实很简单,只需要在你需要保持相对位置的父块添加一条CSS代码“position:relative;
”即可,比如在灰色的middle中添加position:relative;,则绿色子块就会相对灰色父块保持一个相对位置,不论如何改变父块的位置,绿色子块都会与相距灰色灰左边100px,顶部20px。
如果在灰色块中不添加position:relative;而把此代码添加到红色的outer中,则绿色子块会类似上述一样,不再听命于灰色块,而与红色块保持一个相对位置。
如果红色块与灰色块都添加了position:relative,那么绿色子块会相对于离它最近的灰色块保持一个相对不变的位置。
补充说明一点:相对定位是相对于本容器当前的位置进行偏移。