absolute与relative定位

背景

之前我在写css时，看了些博客，以及同事的写的css代码。发现了一个有点奇怪的东西，有的标签的css代码中有position:relative,但是top，left等属性是没有的。这我就很奇怪，怀疑是不是多写了一行代码。

发展

昨天搜索了一下position属性，才发现了其中奥妙。一般元素是默认没有position定位的，或者叫做static定位，出现在正常的文档流中，是忽略top、left、bottom、right与z-index属性的。当你对元素使用绝对定位(position:absolute)和固定定位(position: fixed),该目标元素是相对除static定位之外的第一个父元素进行定位。所以有的时候，为了指定absolute相对的父元素，会给该父元素加一个position:relative。实质上，该父元素，位置并没有发生改变。

图解