相对定位于绝对定位

这是没有定位的图片:不是靠右边的图片，右边的图片是第四幅图片因设置绝对定位样式的父级没有设置相对定位，它的插入点选择了浏览器的左上角所导致的结果，成覆盖状态。

下面是相对定位的图片:POSITION:relative;居左值left为20px,居上值top为50px

下面是设置了居中对齐的图片:

css的绝对定位样式举例： style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px" css“绝对定位”，是指“相对于其最接近的一个有定位设置的父级对象”进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML的定位规则，依据“body对象左上角”作为参考进行定位。我们可以应用“绝对定位样式”中的“居左值”与“居上值”移动其位置。绝对定位对象可层叠。“body对象的左上角”就是“浏览器窗口的左上角”。 在这里，应该弄清楚“父级对象”这个概念。所谓“父级对象”，是指你要定位的这个元素外层的那个标签。 代码举例：

上面的代码中，段落标签中设置了css绝对定位样式，段落标签的外层是一个块区标签。块区标签包裹着、控制着段落标签。这个块区标签就是段落标签的“父级对象”。 由于块区标签中没有设置css定位样式，所以，段落标签中绝对定位样式的插入点是“body对象的左上角”，也就是“浏览器窗口的左上角”。    导致的结果是：图片与第一副图片叠遮，但它浮在最外面！

我们再看看下面的代码：

上面的代码中，由于块区标签中设置了css相对定位样式，所以，段落标签中绝对定位样式的插入点就是这个块区的左上角了。但我把段落标签中设置了居左200px的值，所以，图片离左边很远了。

这一段落标签中，设置的居左值是0，居上值是770px,为的是好在上面的文字下面接着出现文字，否则的话，居上值过小，会覆盖上面的内容，居上值过大，又和上面的文字之间离开好大的距离；而恰是在这里可说明：先在“父级”设置相对定位，固定了插入点后，再在段落标签中设置绝对定位，就可以由我们自己安排文档的位置了。      在这里我要指出的是，“定位插入点”（也叫“参考点”），按照理论上讲，应该在“body对象的左上角”，也就是“浏览器窗口的左上角”。但是，各个网站设置的“定位插入点”的位置是不尽相同的。例如360doc个人图书馆，以前，它们把“定位插入点”设置为“body对象的左上角”。现在呢，它们修改了服务器中的数据啦，把“定位插入点”下移啦。在浏览网页的页面中，“修改”按钮的下面，我们可以看到一条横线，那条横线的左端，就是“定位插入点”。据馆方讲，是因为有一些不大懂代码的朋友们，在他们制作的网页中，应用css定位代码不当，遮蔽了“修改”按钮，无法“修改”网页啦。为了让朋友们修改网页时方便，所以将“定位插入点”下移啦。 目前，360doc个人图书馆的“定位插入点”，在网页中是定位在“修改”按钮下面那条横线的左端；在我们各自的个人图书馆首页，是定位在“左栏左端”垂直向上大约280px的那一点上。 也许有的朋友会问：“body对象”是什么呢？浏览器窗口在什么地方啊？ “body对象”是指网页的主体，也就是浏览器窗口。换句话来讲，就是我们浏览网页时，拖动竖向滚动条能够上下移动的那些网页部分。

空行。

空行。

插图。