position(定位)
position 作为CSS常见重要属性之一,它的作用是用来决定元素在文档中的定位方式。它的属性值有五种,分别是static(正常定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。
static(正常定位)
static是元素position属性的默认值,包含此属性的元素按默认方式排位置
当元素的position属性为static时,元素的top、right、bottom、left、z-index属性都不会生效
元素正常定位下,无论有无添加top、right、bottom、left属性,红色背景的div相对与body元素的边框都不会有任何的变化,由此说明,当元素的position属性值为static时,元素的top、right、bottom、left属性值不会生效,z-index也是如此。
ID为static的元素的z-index属性值明显高于ID为relative的元素。同理,在z轴,ID为static的元素应该比ID为relative的元素更靠近用户,事实上却是ID为relative的元素更靠近用户。
将ID为relative的元素的z-index属性值修改负数后,在z轴ID为static的元素比ID为relative的元素更靠近用户,结合ID为relative的元素的z-index属性值为正数的情况,得出position属性值为static时,元素的z-index是不会受到设置值影响的。
relative(相对定位)
position属性值为relative(相对定位)的元素在不设置top、right、bottom、left这些属性时,其自身在文档中的定位效果与static并无区别,但加上top、right、bottom、left这些属性后,便会相对于自身在常规流中的位置进行定位。
这里三个元素盒子都是用相对定位的,红色盒子没有设置top、right、bottom、left属性,其定位在自身常规流中的位置。黑色盒子设置了top、left为100px属性,所有其定位会相对于自身常规流先向下100px再向右100px移动。灰色盒子和红色盒子一样,没有设置top、right、bottom、left属性,但因黑子盒子再常规流中位置仍然保留,所以灰色盒子只能再红色盒子底部100px的位置上。
absolute(绝对定位)
absolute(绝对定位)与relative(相对定位)之间的区别是:relative(相对定位)并没有脱离文档流,而absolute(绝对定位)脱离了文档流。relative相对于自身在常规流中的位置进行偏移定位,而absolute相对于离自身最近的定位祖先元素的位置进行偏移定位。
什么叫做定位祖先元素?相对定位元素是相对于在常规文档流中的位置进行偏移定位,top、right、bottom、left属性的参考系是元素在常规流中的位置,而在绝对定位里的参考下就是定位祖先元素。拥有相对定位属性值的祖先元素可以充当拥有绝对定位属性值的子孙元素的定位祖先元素。如果子孙元素没有定位祖先元素,会一直向上找到body元素,使用body元素当作自己的定位祖先元素。
fix(固定定位)
fixed(固定定位)和absolute(绝对定位)很像,但也有两点不同:absolute(绝对定位)相对于定位祖先元素进行偏移定位,而fixed(固定定位)相对与窗口进行偏移定位。absolute的定位祖先元素可以是相对定位的元素,而fixed的定位祖先元素只能是窗口。
sticky(粘性定位)
sticky(粘性定位)类似于relative和fixed的结合,当元素position属性为sticky时,如果top、right、bottom、left四个属性都不设置具体值时,sticky不会生效,其表现会和static一样。当至少设置top、right、bottom、left一个属性时,元素具备两种状态,类似于relative和fixed。
当粘性定位的元素处于类似于relative时,它并不是单纯的相对于自身在常规流中的位置进行偏移定位。当粘性定位的元素处于类似fixed时,它在常规流中的位置仍然保留
Ending
以上内容就是对CSS的定位属性的总结。