想对元素从它的原本位置或浮动位置进行上、下、左、右4个方向的偏移。不想让偏移影响其他元素的位置。但是不像绝对元素和固定元素偏移的设计模式，你想让元素保持原本的尺寸与形状(大小、断行、行间距等)。下面我们给大家介绍一下html5相对元素的偏移的方法吧!

解决方案

一个相对元素是指一个浮动和静态元素被设置了position:relative.它的位置是由元素的原始排列顺序或浮动顺序决定的。

可以用top和left把它从原始位置上进行偏移。正值会把它向右和下移动，负值会把它向左和向上移动。不像元素的外边距，相对偏移绝对不会影响其他的元素。

相对元素是在没脱离原始排列顺序中的一个层进行解析的。这样就可以用z-index覆盖元素并且控制它们的堆叠顺序。一个相对元素定位后，它允许绝对定位的后代元素相对它来定位。一个相对元素是一个原子，这意味着外界的元素不能插在它的静态定位后代元素、内联内容、背景之间。如果z-index被设置成一个非零值，相对元素就会创建它自己的非堆叠环境，这意味着外界元素即使被定位了，也不能插在它任何后代元素中间。

模式

SELECTOR { position:relative; top:±VALUE; left:±VALUE;z-index:+VALUE }

适用范围

此模式可应用于所有的元素。

局限

一个相对元素不能同时被绝对或固定定位。

实例

可以注意到，在例子中，内联span在相对偏移过程中也保持了原来的形状。同样能够看到，左浮动只是相对向左偏移了50px,设定尺寸的静态块状元素向右偏移了50px,并且它们同时都降低了10px.缩进的静态块状元素被提升了32px,以适应浮动和设定尺寸的块状元素

以上就是我们给大家介绍的html5相对元素的偏移的方法了。希望大家继续关注我们的网站!