首页 > 代码库 > CSS-如何让绝对定位的容器与父块保持相对位置
CSS-如何让绝对定位的容器与父块保持相对位置
原文地址：http://www.lightdew.com/a/wangyemeigong/249.html
在制作网页的过程中，难免要使用到绝对定位，绝对定位是将一个窗口直接定位到一个坐标上，使用起来很方便，但同时，很多人在使用的时候，也产生了另外一个 问题，那就是不好控制，明明父块元素已经移动了，使用了绝对定位的子块却不跟着移动，这到底是怎么回事呢？
首先说明一下绝对定位的一个特性，那就是：使用了绝对定位的元素都已经“漂”起来了，由于它已经飘出了父块，所以，它不再受父块的控制。
且看下面的一个例子:
<!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，那么绿色子块会相对于离它最近的灰色块保持一个相对不变的位置。
补充说明一点：相对定位是相对于本容器当前的位置进行偏移。
CSS-如何让绝对定位的容器与父块保持相对位置