用css设计一个搜索网页,网页制作之利用CSS如何定位

一：position

语法：

position : static | absolute | fixed | relative

参数：

static : 　无特殊定位，对象遵循HTML定位规则

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

fixed : 　IE5.5及NS6尚不支持此属性

说明：

检索对象的定位方式。

对应的脚本特性为position。请参阅我编写的其他书目。

示例：

div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

div { position:relative; top:-3px; left:6px; }

二：z-index

语法：

z-index : auto | number

参数：

auto : 　遵从其父对象的定位

number : 　无单位的整数值。可为负数

说明：

检索或设置对象的层叠顺序。

如两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠

对应的脚本特性为zIndex。请参阅我编写的其他书目。

示例：

div { position:absolute; z-index:3; width:6px; }

三：top

语法：

top : auto | length

参数：

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值，或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

说明：

检索或设置对象与其最近一个定位的父对象顶部相关的位置。

对应的脚本特性为top。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posTop，pixelTop，以及对象的offsetTop等特性。请参阅我编写的其他书目。

示例：

div { position: absolute; top: 1in; }

div { position:relative; top:-3px; left:6px; }

四：right

语法：

right : auto | length

参数：

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

说明：

检索或设置对象与其最近一个定位的父对象右边相关的位置。

对应的脚本特性为right。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posRight，pixelRight等特性。请参阅我编写的其他书目。

示例：

div { position: absolute; right: 1in; }

div { position:relative; top:-3px; right:6px; }

五：bottom

语法：

bottom : auto | length

参数：

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

说明：

检索或设置对象与其最近一个定位的父对象底边相关的位置。

对应的脚本特性为bottom。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posBottom，pixelBottom等运行时特性。请参阅我编写的其他书目。

示例：

div { position: absolute; bottom: 1in; }

div { position:relative; bottom:6px; }

六：left

语法：

left : auto | length

参数：

auto : 　无特殊定位，根据HTML定位规则载文档流中分配

length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

说明：

检索或设置对象与其最近一个定位的父对象左边相关的位置。

对应的脚本特性为left。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用style对象的posLeft，pixelLeft，以及对象的offsetLeft等特性。请参阅我编写的其他书目。

示例：

div { position: absolute; left: 1in; }

div { position:relative; top:-3px; left:6px; }