详解CSS的相对定位和绝对定位

 

原文地址：http://www.3lian.com/edu/2015/01-31/191131.html

 

上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子：

然后我们给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; 这时就变成了下图所示：在上图中的去购物车结算按钮左上方有一个红色的小块，用来显示购物车中有几件商品，大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现，但是现在刚刚学了绝对定位，这个问题就不再是问题了。然后我们写HTML: 

absolute定位相对于文档body（并非窗口,相对于窗口定位的是fixed）【注意两者的区别，可以通过一张图来理解，红色边框是窗口body的边框，紫色背景色是文档body的部分】

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：详解CSS的相对定位和绝对定位

关键词：CSS