css 相对定位和绝对定位的进一步了解

来源：互联网发布：淘宝初期运营编辑：程序博客网时间：2024/05/16 11:41

原文链接：http://www.cnblogs.com/lxblog/p/3152897.html

总结一下CSS中的定位 Position 属性

在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下，防止久而忘之。

CSS position 属性值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit：规定应该从父元素继承 position 属性的值。

我们最常用的的就是 absolute 和 relative 两种方式，所以主要讨论着两者的区别。

relative 相对定位

相对定位我们主要是要知道相对于谁来进行偏移的？其实相对定位是相对于元素自己的本身的位置，我们来看一下例子：

<!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>    <title></title>    <style type="text/css">        html body        {            margin: 0px;            padding: 0px;        }        #parent        {            width: 200px;            height: 200px;            border: solid 5px black;            padding: 0px;            position: relative;            background-color: green;            top: 15px;            left: 15px;        }        #sub1        {            width: 100px;            height: 100px;            background-color: blue;        }        #sub2        {            width: 100px;            height: 100px;            background-color: red;        }    </style></head><body>    <div id="parent">        <div id="sub1">        </div>        <div id="sub2">        </div>    </div></body></html>

这是一个嵌套的DIV，一个父Div Parent，包含两个子DIV Sub1 和 Sub2，由于两个子DIV没有设置任何Position属性，它们处于它们应当的位置。默认位置如下图：

当我们修改一下Div Sub1 的样式：

#sub1{    width: 100px;    height: 100px;    background-color: blue;    position: relative;    top: 15px;    left: 15px;}

结果如下图：我们会发现Sub1进行了偏移，并不影响Sub2的位置，同时遮盖住了Sub2，切记偏移并不是相对于 Div Parent的，而是相对于Sub1 原有的位置。

如果我们把Sub1 的同级Div Sub2 也设置一个相对位置，会产生什么结果？我们来看一下。

#sub2{   width: 100px;   height: 100px;   background-color: red;    position: relative;   top: 10px;   left: 10px;                  }

结果如下图：

Sub2也根据原有位置进行了偏移，同时遮盖住了Sub1，也不会影响Sub1的位置。相对定位比较容易理解，我们再来看一下绝对定位Absolute。

absolute 绝对定位

绝对定位在使用当中比较容易出错的，有几个需要注意的地方，将上面的代码还原，我们为Sub1 增加一个绝对定位。

#sub1{    width: 100px;    height: 100px;    background-color: blue;    position: absolute;    top: 15px;    left: 15px;}

结果如下：

我们发现，由于我们对Sub1进行了绝对定位，Sub1的位置发生了偏移，而同级Div Sub2，则占据了Sub1的位置，并且Sub1遮挡了Sub2.

（以下个人补充：因为sub2没有发生浮动，所以无论sub1相对于哪个元素发生移动，sub2填补的只是sub1原来的位置，并且由于sub1浮动起来了，所以sub1在上面。

但是如果对sub2进行了相对定位，这时sub2还是会补充到sub1原来的位置，但是因为这时sub2也发生了相对定位，所以sub2在sub1的上面，并且sub2会根据left和top的值进行移动定位。）

下面，把Sub2 也增加绝对定位：

#sub2{     width: 100px;     height: 100px;     background-color: red;         position: absolute;     top: 10px;     left: 10px;              }

结果如下：

我们会发现，Sub2 也进行了偏移，并且遮盖住了Sub1。

这时候，我们会发现问题，两个子Div 都设置了绝对定位，他们是相对于哪个元素发生了偏移呢？

这分两种情况：

1、如果Sub1 的父元素或者祖父元素，设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于父元素来进行定位。比如我们例子中最外层Div Parent设置了相对定位属性，因此Sub1 和 Sub2 两个Div 就根据 Div Parent 来进行定位。但是根据Parent那个定位点进行定位呢？答案是：如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位。（以下为个人补充：但是如果不设置top和left的值或者只设置了margin的值，就不会忽略padding的值，即会从padding之后的位置开始移动）

涉及到margin对绝对定位的影响，参考之前的博文：http://blog.csdn.net/tt_twilight/article/details/72824039

举个栗子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">body{margin:0;padding:0;}.parent{width:200px;height:200px;border:solid 5px black;padding:10px;background-color:green;position:relative;left:15px;top:15px;}.sub1{width:100px;height:100px;background-color:blue;position:absolute;}.sub2{width:100px;height:100px;background-color:red;}</style></head><body><div class="parent"><div class="sub1"></div><div class="sub2"></div></div></body></html>

给parent设置了padding值，这时sub1是绝对定位的，并且没有设置left，top值

结果：

下面为sub1设置left和top值：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">body{margin:0;padding:0;}.parent{width:200px;height:200px;border:solid 5px black;padding:10px;background-color:green;position:relative;left:15px;top:15px;}.sub1{width:100px;height:100px;background-color:blue;position:absolute;left:10px;top:10px;}.sub2{width:100px;height:100px;background-color:red;}</style></head><body><div class="parent"><div class="sub1"></div><div class="sub2"></div></div></body></html>

结果：

再一个栗子：

为sub1只设置margin值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">body{margin:0;padding:0;}.parent{width:200px;height:200px;border:solid 5px black;padding:10px;background-color:green;position:relative;left:15px;top:15px;}.sub1{width:100px;height:100px;background-color:blue;position:absolute;margin-left:10px;}.sub2{width:100px;height:100px;background-color:red;}</style></head><body><div class="parent"><div class="sub1"></div><div class="sub2"></div></div></body></html>

结果：

sub1是根据padding之后的位置移动的，因为只设置了margin。

下面为sub1加上left：10px

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">body{margin:0;padding:0;}.parent{width:200px;height:200px;border:solid 5px black;padding:10px;background-color:green;position:relative;left:15px;top:15px;}.sub1{width:100px;height:100px;background-color:blue;position:absolute;margin-left:10px;left:10px;}.sub2{width:100px;height:100px;background-color:red;}</style></head><body><div class="parent"><div class="sub1"></div><div class="sub2"></div></div></body></html>

结果：

这时还是忽略padding的值，只不过margin加上移动的left值。。

补充完毕。

2、如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。

我们将例子中的Parent 的Position 属性删除，再来看一下结果：

由于两个子div没有找到有Position属性的父元素，则以Body进行定位，由于图片原因，请不要误以为是相对于Parent的。

fixed 定位方式

fixed是一种特殊的absolute，fixed总是以body为定位对象的，按照浏览器的窗口进行定位。我们将代码还原到最初状态，Sub1 增加absolute定位方式，而Sub2 增加fixed定位方式：

#sub1{   width: 100px;   height: 100px;   background-color: blue;   position: absolute;   top: 15px;   left: 15px;}#sub2{   width: 100px;   height: 100px;   background-color: red;       position: fixed;   top: 5px;   left: 5px;              }

结果如下：

会发现Sub2 始终以body 进行定位，而Sub1由于发现Parent 有position属性relative，则根据父元素进行定位偏移。

注意fixed 在IE 低版本中式不支持的，包括IE6

至于 static 和 inherit 两种定位，项目中很少用到，static 就是Position属性的默认值，一般不设置position属性时，会按照正常的文档流进行排列。这里就不在赘述。

阅读全文

0 0