position:relative 相对定位

Question

怎么理解，求大神指教

Answer 1

你好：

position:relative 相对定位

什么是相对定位？相对什么定位？这是重要的问题。我的回答是——相对自己文档流中的原始位置定位。它的特点是——不会脱离文档流。

也就是说，使用position:relative定位，其元素依旧在文档流中，他的位置可以使用left、right、top、bottom、z-index等定位参数，但是，他的存在，还是会影响文档中紧跟在他周围的元素的。

无论多少文字描述，可能都无法让你理解。下面，我们看一下实际效果。

如上图的演示，我给test3加上了position:relative定位效果。代码如下：

position: relative;left: -20px;top: 20px;

大家可以清晰的从图上看出来，test3根据CSS参数left: -20px;top: 20px;发生了位移。

但是！但是！但是！重要的事情说三遍，它的唯一并没有对周围的元素有任何的影响！！它依然存在于文档流中。它的位移是根据它在文档流中的原始位置发生的！！这一点非常非常重要。

望采纳！