web前端技术讲解之CSS中position的定位技术

使用position定位有四种方式，分别为absolute、relative、static、fixed，static是静态定位，也为系统自动定位。下面主要分析其他三种定位方式的特点。

 

 

 

1. 绝对定位：position:absolute

(1) 绝对定位是将元素依据已经定位（绝对、固定或相对定位）的离他最近的祖先元素进行定位，祖先元素没有定位或没有祖先元素则默认依据body浏览器窗口定位。

(2) 绝对定位的元素不论本身是什么类型，定位后都将成为一个新的块级元素，如果未指定宽高度默认自适应实际包含的内容区域（不在默认浏览器宽度）。

(3) 绝对定位后的元素将处于赋予其他元素之上，自身不占位置，他原来在正常文档流中所占的空间同时被关闭，就是说绝对定位的元素不占据页面空间，原空间被后续元素使用。

绝对定位必须用left、right、top、bottom属性之一激活，用于指定元素左、右、上、下外边距距离已定位祖先元素（或浏览器）左、右、上、下内边框的距离。

如果定义多个属性，当left、right、冲突时以left为准，当top、bottom冲突时以top为准，如果一个也不指定则元素扔按普通文档流布局，但他自己不再占据空间，后续元素上移与其重叠。

绝对定位元素定位后相对祖先元素的位置不在变化，若页面内容较多拖动页面滚动时，定位元素会随页面一起滚动。

绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们的叠放次序。

 

 

 

2. 相对定位：position:relative

(1) 相对定位是让元素（可以是行内元素）相对于它在正常文档流原位置按left、right、top、和bottom偏移量移动到新位置。

(2) 相对定位的元素移动后保持原外观样式大小，移动定位后不会占据新空间会覆盖新位置原有元素，原位置空间被保留，其他元素相对他原来的位置不变。

(3) Left、right、top、和bottom指定相对原位置移动的偏移量，可以使用带单位数值、相对父元素的百分比%。

Left正值：左边向内—向右移动，负值：左边向外—向左。

right正值：右边向内—向左移动，负值：右边向外—向右。

top正值：上边向内—向下移动，负值：上边向外—向上。

bottom正值：下边向内—向上移动，负值：下边向外—向下。

3. 固定定位：position:fixed

固定定位与绝对定位absolute相似，定位后元素也生成为新块级盒框、覆盖新位置原有元素，在正常文档流中所占的原空间关闭被后续元素使用。

 

 

 

固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位，不会随滚动条拖动页面而滚动，固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置

总结：元素的定位模型中需要区分每个属性值的不同定位方式，分为绝对定位、相对定位、固定定位以及默认定位和继承父元素。其中绝对定位和固定定位都脱离原本的文档流，而相对定位则遵循原本的文档流。设置元素的定位方式后，还需要指定偏移量。可以从上、右、下、左四个方向进行偏移。并且可以利用Z-index属性设置元素之间的层叠顺序。