网页制作中,当我们希望元素出现在某个特定的位置时,浮动布局就显得不够精确了,此时我们便需要使用定位属性对元素进行精确定位。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:该属性只对定位元素生效