在CSS中，left、right、top、bottom表示距离左右上下的值，它们其实是有一个“参照物”的。要想让这4个属性发挥作用，必须给position属性设置（非static的）值。
position属性，有以下取值：
- static：默认值，表示没有定位（没有参照物。所以left等值设置了也没用）
- inherit：继承父元素的值
- relative：相对定位，表示相对于“本来所在的位置”
- absolute：绝对定位，表示相对于最近的而且指定了position为非static值的父元素、或者相对于body
- fixed：固定在浏览器视角的某个位置，不随滚动条滚动而变化
其中比较难明白的是relative和absolute，下面通过一些例子来说说它们的特点。
1、relative：
relative值表示相对于原来的位置。什么叫“原来的位置”呢？就是元素不设置position属性（或者设置为static），在文档流中应该存在的位置。
然后，如果设置：left:10px，就意味着把该元素放置在距离该位置左侧10px的位置，表现为原地向右移动10px。比如这个例子：
relative块的position属性为relative，它原来的位置，是在static块下面，但是设置了left和top属性，就相对于该位置移动了一些距离。
相应的代码在最后的“例子1”。
2、absolute：
- 设置了absolute的元素，会寻找距离最近的、并且position属性设置成除static以外的值的父元素作为参照物，如果找不到，就以body作为参照。
- 设置的left、right、top、bottom，都是相对于这个参照物。
设置了absolute的元素，会脱离文档流（BTW，设置了float属性也会）。
还是刚才那个例子，如果我把下面那个红色块由relative改成absolute，那么效果为：
可以看到，absolute块相对于左上角（body）偏移了一些距离。并且，该元素不在文档流中（黄色边框表示body的范畴。body并没有为absolute块预留一个位置，说明absolute块不在其中）。
代码就不写出来了，就是把relative改成absolute。根据第一条规则，一般我们想要让元素相对于某个父元素，那么可以设置该元素为absolute，然后设置父元素为relative（不影响其位置）
补充代码：
- 例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Positioning</title>
<style type="text/css">
#container div {
width: 200px;
height: 100px;
}
</style>
</head>
<body style="border: 5px yellow solid;">
<div id="container">
<div style="border: 1px blue solid; position: static;">
static(default)
</div>
<div style="background-color: red; position: relative; left: 20px; top: 50px;">
relative<br />left: 20px<br />top: 50px
</div>
</div>
</body>
</html>
2394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
