html中绝对坐标,html中的相对定位和绝对定位的区别

原标题：html中的相对定位和绝对定位的区别

在文档流中，每个块元素都会被安排到流中的一个位置，我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位。也就是position属性的relative和absolute值。

一、相对定位(relative)

如果我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中该出现的位置，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。

如下图：

上图中有三个浮动的块，第二个块是设置了相对定位position:relative的，它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。

给第二个块设置一个偏移：left:50px; top:30px; 后的效果：

发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。

二、绝对定位(absolute)

设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最先的包含块。(因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。)

例子：给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; 效果如下：返回搜狐，查看更多

责任编辑：