css定位属性

网页制作中，当我们希望元素出现在某个特定的位置时，浮动布局就显得不够精确了，此时我们便需要使用定位属性对元素进行精确定位。Css的定位就是将元素放在指定的页面位置。首先我们要确定定位的模式，在CSS中，position属性用于定义元素的定位模式，他有5个常用的属性值，分别表示不同的定位模式，1.static静态定位(默认的定位方式)2.relative相对定位，相对于原文档流的位置进行定位。3.absolute绝对定位，相对于其上一个已经定位的父元素进行定位4.fixed固定定位，相对于浏览器窗口进行定位。5.sticky黏性定位。当确定属性之后，再通过top、bottom、left和right来精确定位元素的位置。

1. static静态定位

静态定位是元素的默认定位方式，当position的属性值是static时，元素会显示在 HTML文档流中默认的位置，他会遵循默认值显示为静态位置，在静态定位状态下不能通过top、bottom、left和right来改变元素的位置。Ps:可以取消元素之前的定位设置。

2. relative相对定位

相对定位是将元素相对于它在标准文档流中的位置进行定位，参照物是自身所在的位置，可以通过设置偏移量来改变元素的位置，同时不会使元素脱离文档流，他的空间也会被保留，如果没有定义偏移量，对元素本身也没有任何影响。

3. absolute绝对定位

绝对定位是将元素依据最近的已经定位的父元素进行定位，若所有父元素都没有定位，则依据body根元素html(浏览器窗口)进行定位，与相对定位不同的是，绝对定位会使元素完全脱离文档流，不再占据标准文档流中的空间。Ps:能使内联元素支持宽高，让内联元素具备块的特性，当定义多个偏移量时，如果left和right冲突，则以left为准，top和bottom冲突则以top为准。

4. fixed固定定位

固定定位的参照物始终都是相对于整个浏览器窗口进行固定定位的，当对元素设置固定定位后，该元素将脱离文档流，会使内联元素支持宽高，具备内联块的特性，使块元素默认宽根据内容决定，让块元素具备内联块的特性。相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到父元素的影响。

5.sticky黏性定位

在没有到达指定位置的时候，元素的定位效果类型是relative相对定位，到达了指定位置，就变成了fixed固定定位。如：position：sticky ；top：100px；在元素距离窗口定位>100px时，元素定位效果类型relative，当元素距离窗口<=100px时，效果类型为固定定位。

6. z-index层叠等级属性

当多个元素同时设置定位时，定位元素之间可能会产生重叠，可以对定位元素使用z-index层叠等级属性，其取值以是正整数、负整数和0，取值越大，定位元素在层叠元素中越靠上，z-index的默认值是0。Ps：该属性只对定位元素生效