对于css中的定位，自己一直没搞清楚，相信很多初学者刚开始也是犯糊涂，一会绝对定位，一会相对定位，很容易搞混，在实际开发中到底应该怎么使用呢？接下来我们就仔细的谈谈css中的几种定位，希望大家能够区分开来
Css中的定位主要分为以下几种：
Static
默认的属性，如果你不设置position属性，则其默认为该属性，这个属性没啥说的，就是文档元素从左到右，从上到下显示即可。
Absolute
你可以理解为绝对定位，但是它是相对于父级容器的绝对定位。
那么什么叫绝对定位呢？就是一旦指定位置，元素就是固定的，位置不会改变。
下面我们来看个例子。
代码清单1-1
<body>
<div id="fuji" style="position:absolute;top:100px;left:100px;background-color:black;width:500px;height:500px;">
<span id="zilei" style="position:absolute;top:100px;left:100;font-size:20px;font-weight:bold;color:red">i work in beijinghuatang complay</span>
</div>
</body>
在这里我们可以看到，<span>元素是<div>元素的子元素，我们设置div元素的定位为absolute，top和left值为100px，背景颜色为黑色，宽度和高度为500px，span元素的定位也为absolute，top和left也为100px，字体大小为20px，加粗字体，字体颜色为红色，显示效果如下：
可以看到div元素相当于他的父元素（body）元素的位置1点偏移了500px,而span元素相当于他的父元素（div）元素偏移了100px，那么现在我们想来看下分别向body元素和div元素中添加块级元素（div），看我们的元素位置是否发生变化
代码清单1-2
<body style="font-weight:bold;color:red">
body元素
<div style="font-weight:bold;color:red;width:200px;height:200px;background-color:blue;">新添加：div1</div>
<div id="fuji" style="position:absolute;top:100px;left:100px;background-color:black;width:500px;height:300px;color:red;font-weight:bold;">
div元素
<div style="font-weight:bold;color:red;width:200px;height:200px;background-color:blue;">新添加：div1</div>
<span id="zilei" style="position:absolute;top:100px;left:100;font-size:20px;font- weight:bold;color:red;border;background-color:white">i work in beijingxxxx complay<br>span元素</span>
</div></body>
在这里添加了两个元素，一个是在body元素中，一个是在div元素中，我们可以看到之前绝对定位的div元素和span元素相对于他们的父元素的位置并没有发生变化。
小结：绝对定位是相对于父元素来说的，只要父元素的位置固定，子类元素的位置就不会发生变化。
Fixed
通俗理解为固定定位，就是相对于body元素的左上角来说的。位置固定后就不会变化了。
我们将代码清单1-2的position属性值设置为fixed，显示效果如下：
我们可以看到div和span元素的位置相对于body元素的左上角来说并未发生变化。
Relative
通俗可以理解为相对定位，相对定位的初始定位是相对它的父级元素来说的，但当添加元素的时候，它的位置是由它的兄弟元素和父元素共同决定的。
我们将代码清单1-2的position的属性值改为relative，浏览器显示如图：
我们可以看到div元素相对于新添加的元素向下偏移了100px，span元素相对于新添加的div1元素向下偏移了50px。而他们的left属性的位置都没有发生变化。
总结：看到这也许你已经看明白了，不过还是建议动手自己试试，这样才能加深理解和掌握。
8595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
