什麼是html5相對元素的偏移？

想對元素從它的原本位置或浮動位置進行上、下、左、右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相對元素的偏移的方法了。希望大家繼續關注我們的網站!