全面解析css定位属性position(主要是relative以及absolute)

来源：互联网发布：java用汉字组成的图案编辑：程序博客网时间：2024/04/26 15:29

position 属性是规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

以上是w3c对与position属性的解释和说明。。。看懂了么。。好吧一开始我看的时候也是懵懵懂懂，没有实际操作过，你绝对无法模拟出他的实际效果。

我一直认为，实践是检验真理的唯一标准。所以多多实践才是王道。废话不多讲，下面来具体解析这个属性。

所有html元素的position属性的默认值是static，这个属性标志着所有元素都要遵守正常流动布局，也就是默认布局。首先我们来说说absolute这个值。

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<pre id="line1"><span></span>

<!DOCTYPE html>
<html>
    <head>
        <style type = "text/css">
            #parentDiv{
               width:100px;
               height:100px;
               border:1px solid blue;
               margin:50px;
           }
            #childDiv{
               width:50px;
               height:50px;
               border:1px solid green;
               position:absolute;
               top:0;
left:0;
           }
        </style>
    </head>
    <body>
        <div id = "parentDiv">
            <div id = "childDiv"></div>
        </div>
    </body>
</html>

上面我们给 childDiv 这个div设置了absolute属性并且设置了top和left

让我们看看实际效果(想看效果的直接复制上面代码保存为html文件打开即可)

childDiv使用了absolute 绝对布局方式来定位自身。设置absolute后。浏览器会寻找childdiv的父容器，也就是

parentDiv 这个div，查看这个父容器的属性是否为static，如果是static这个默认的属性，浏览器会默认寻找parentDiv

这个容器的父类，判断其是否为static，如果不是static，将依据非static这个值的容器进行定位,直到body停止,relative和absolute都可以，请看下面这个栗子

<!DOCTYPE html><html>    <head>        <style type = "text/css">            #parentDiv{width:100px;height:100px;border:1px solid blue;margin:50px;position:relative;//新增定位属性}            #childDiv{width:50px;height:50px;border:1px solid green;position:absolute;top:0;left:0;}        </style>    </head>    <body>        <div id = "parentDiv">            <div id = "childDiv"></div>        </div>    </body></html>

上面这个栗子。。childDiv他定位依赖的容器就是parentDiv!

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"

属性进行规定。

这个属性很容易就能弄懂。设置fixed后，当前元素永远都会根据body来定位。在此不做代码演示

relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

这个属性也很容易理解，他与absolute是不同的，absolute会寻找父容器来判断是否依赖定位。但是这个不会

父容器，他会依赖与自己本身在正常流定位的位置然后偏移，可以看下面这个栗子

<!DOCTYPE html><html>    <head>        <style type = "text/css">            #parentDiv{width:100px;height:100px;border:1px solid blue;margin:50px;}            #childDiv{width:50px;height:50px;border:1px solid green;position:relative;top:20px;left:20px;}        </style>    </head>    <body>        <div id = "parentDiv">            <div id = "childDiv"></div>        </div>    </body></html>

这个栗子其实是文章第一个栗子的修改版。。只修改了childDiv的position属性和偏移值,在上面的栗子中我们可以

看出，childDiv依赖与原先的位置偏移了位置，读者可以修改parentDiv的定位属性来查看效果

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

默认值。。你懂的。。在此不多做介绍

inherit：规定应该从父元素继承 position 属性的值。

继承父类的position属性，基本不用，因为你不知道父类容器的定位属性会在何种需求下更改，可能会导致

意想不到的惊喜。。。所以一般建议不要使用

0 0