CSS-定位属性

       使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位是指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。

     1.1定位方式 position

使用定位方式属性可以控制浏览器应如何定位HTML 元素。

语法:

position:static|absolute|fixed|relaive

说明：

static 表示默认值；

absolute表示采用绝对定位，需要同时使用left、right、top和bottom等属性进行绝对定位；

fixed 表示当页面滚动时，元素不随着滚动；

relative 表示采用相对定位，对象不可层叠。

1.2元素位置top、right、bottom、left

元素位置属性与定位方式共同设置元素的具体位置。

语法：

top:auto |长度|百分比

right:auto|长度值|百分比

bottom:auto|长度值|百分比

left:auto|长度值|百分比

说明：

auto 表示采用默认值，长度值包含数字和单位，也可以使用百分比来设置。

举例：

1.3 层叠顺序 z-index

使用层叠可以设置层的先后顺序和覆盖关系。默认情况下，z-index值为1，表示该层位于最底层。

语法：

z-index:auto|数字

说明：

auto遵从其父对象的定位；数字必须使无单位的整数值；可以取负值。

举例：

1.4 浮动属性 float

使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。

语法：

float：none|left|right

说明：

none是默认值，表示对象浮动；left表示文字浮动在元素的右边，right表示文字浮动在元素的左边。

举例：

1.5 清楚属性 clear

清楚属性用于指定一个元素是否允许有其他元素漂浮在它的周围。

语法：

clear：none|left|right|both

说明：

none 表示允许两边都可以有浮动对象，是默认值；

left 表示不允许左边有浮动对象；

right 表示不允许右边有浮动对象；

both 表示不允许有浮动对象。

1.6 可视区域 clip

使用clip属性可以限制只显示裁切出的区域，裁切出的区域为矩形。只要设置两个点即可，一个是矩形左上角的定点