CSS-如何让绝对定位的容器与父块保持相对位置

浏览数：39 / 时间：2015年06月09日

原文地址：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，那么绿色子块会相对于离它最近的灰色块保持一个相对不变的位置。

补充说明一点：相对定位是相对于本容器当前的位置进行偏移。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS-如何让绝对定位的容器与父块保持相对位置