CSS相对定位——CSS实验室

我们首先来搭建实验定位的平台，一个p元素。点击下面的按钮以将这个p元素“圈出来”。 在p的外面还套着一个div，再点击下面的按钮将它圈出来。

下面，我们再来添加一段撑门面的段落，后面就会明白这个段落的作用了。

CSS相对定位，position:relative

我们可以点击下面的按钮给p设置相对定位属性。

position:relative;

我们发现，p呆在原来的地方没有动。可见，默认情况下，它就是相对定位(position:relative;)的。

设置了相对定位之后，就可以设置定位相关的其它几个属性了。

left:50px;

right:50px;

top:50px;

bottom:50px;

反复实验几遍会发现：

• left和right是矛盾的，都设置不会起作用；同样，top和bottom也是矛盾的一组属性。
• 不同的浏览器下，如果我们只设置left，那么实际位置会有很大不同。好的办法就是只设置一个left、right组中必须设置一个，而top和bottom一组中也必须同时设置一个。