html5絕對元素的對齊與偏移的方法

想把絕對定位元素排列到它的定位最近的祖先元素的上、下、左、右4邊上。還想將它從排列位置上進行偏移。還想為它設置尺寸或進行包裹。下面我們就給大家介紹一下html5絕對元素的對齊與偏移的方法吧!

解決方案

把樣式賦給已選擇的類和ID上：

n  用width:+VALUE和height:+VALUE為元素設定尺寸;

n  用width:auto和height:auto對元素進行包裹。

從左側進行偏移：

n  用left:0和right:auto將元素左對齊;

n  用margin-left:+VALUE將元素從左側向右偏移;

n  用margin-left:-VALUE將元素從左側向左偏移。

從右側進行偏移：

n  用right:0和left:auto將元素右對齊;

n  用margin-right:+VALUE將元素從右側向左偏移;

n  用margin-right:-VALUE將元素從右側向右偏移。

從頂端進行偏移：

n  用top:0和bottom:auto將元素頂端對齊;

n  用margin-top:+VALUE將元素從頂端向下偏移;

n  用margin-top:-VALUE將元素從頂端向上偏移。

從底端進行偏移：

n  用bottom:0和top:auto將元素底端對齊;

n  用margin-bottom:+VALUE將元素從底端向上偏移;

n  用margin-bottom:-VALUE將元素從底端向下偏移。

模式

絕對元素的左偏移

SELECTOR { position:absolute; left:0;right:auto;

margin-left:±VALUE;margin-right:auto; }

絕對元素的右偏移

SELECTOR { position:absolute; left:auto;  right:0;

margin-left:auto; margin-right:±VALUE;}

絕對元素的頂端偏移

SELECTOR { position:absolute; top:0;bottom:auto;

margin-top:±VALUE;margin-bottom:auto; }

絕對元素的底端偏移

SELECTOR { position:absolute; top:auto; bottom:0;

margin-top:auto; margin-bottom:±VALUE; }

適用范圍

此設計模式可應用於所有元素。

以上就是我們給大家介紹的html5絕對元素的對齊與偏移的方法了。希望大家繼續關注我們的網站!