成都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属性设置元素之间的层叠顺序。

　　本文章由千锋成都web前端培训学员总结分享，学习web前端，可以参考千锋提供的web前端学习路线，该学习路线对从零基础小白到web前端初级开发工程师，web前端高级开发工程师，后面的web前端大神级开发工程师都有一个明确清晰的指导，根据千锋提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解，并快速入门web前端开发。

　　成都千锋校区：http://cd.mobile***/
　　培训咨询热线：028-83178771   咨 询 Q Q : 1660794050
　　成都千锋校址：成都市武侯区科华北路62号力宝大厦N（北楼）18楼"