热搜词
发表于 2012-10-23 08:55:39 | 显示全部楼层 |阅读模式
      定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

定位的定义
(1)语法
  position:static|absolute|fixed|relative

(2)说明
   static:静态定位(默认),没有特别的设定,遵循基本的定位规定,元素出现在文档流中,忽略top,left,z-index等声明,不能通过z-index进行层次分级。
   relative:相对定位,不脱离文档流,元素会以它原本的位置为基点,偏移指定的距离。元素仍保持原来的形状,它原本所占的空间仍保留。移动后的元素有可能会和其他元素重叠。
   absolute:绝对定位,脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
   fixed:固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;
auto:遵从其父对象的定位
namber:无单位的整数值。可为负数

(3)示例
02.gif

01.gif

3、relative与absolute的主要区别:
relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式,
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位。
全部评论0
回复
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|管理员之家 ( 苏ICP备2023053177号-2 )

GMT+8, 2025-1-16 03:45 , Processed in 0.269753 second(s), 28 queries .

Powered by Discuz! X3.5

Cpoyright © 2001-2025 Discuz! Team