CSS定位position

最新推荐文章于 2025-09-10 10:14:21 发布

原创最新推荐文章于 2025-09-10 10:14:21 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了CSS中position、z-index、top、right、bottom、left等属性的使用，详细介绍了各种定位方式（static、absolute、fixed、relative）的目的、常用语法以及参数设置，帮助开发者更好地理解并应用这些属性实现网页元素的精准定位与层次布局。

特性：position 版本：CSS2　目的：定位方式常用
语法：
position : static | absolute | fixed | relative
参数：
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性

特性：z-index版本：CSS2　目的：定位层次常用
语法：
z-index : auto | number
参数：
auto : 　遵从其父对象的定位
number : 　无单位的整数值。可为负数

top版本：CSS2　目的顶部层次
语法：
top : auto | length
参数：
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值，或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

right版本：CSS2　目的：右边定位
语法：
right : auto | length
参数：
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

bottom版本：CSS2　目的：底部定位
语法：
bottom : auto | length
参数：
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位

left版本：CSS2　目的：左边定位
语法：
left : auto | length
参数：
auto : 　无特殊定位，根据HTML定位规则载文档流中分配
length : 　由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。请参阅长度单位