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绝对元素的对齐与偏移的方法了。希望大家继续关注我们的网站!