大家好,我是逆战班的一名学员,今天我来给大家分享一下CSS定位这个属性的相关知识!
CSS定位往往在页面布局中起到了美化的作用,定位也分为多种方式,定位属性用于检索或设置对象的定位方式。
对于定位机制来说,有决定上下排列布局的普通流、左右排列布局的浮动流、还有叠加排列布局的定位流,多数情况下都会用到这些机制。定位属性(position)也有五种属性值:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)、粘性定位(sticky)。接下来我们具体了解一下这几种定位属性。
静态定位(static)
static 是默认值,没有定位效果,还可以用于取消元素之前的定位设置;一般情况下,不添加任何定位属性都属于静态定位。
相对定位(relative)
相对定位的参照物是其本身所在的位置。若没有设置定位偏移量,对元素本身的位置不会产生影响;定位偏移后,原有的空间会被保留,元素不会脱离文档流,而且也不会影响其他元素布局。
定位前
定位后
绝对定位(absolute)
绝对定位的参照物是该元素的祖先级元素。当该元素的父元素设置了定位属性,它就会以该父元素为参考进行定位;若它的上一级父元素没有设置定位属性,那么就看这个父元素的父元素是否设置定位属性,倘若所有祖先级元素都没有设置定位属性,则会相对于文档body来定位(即可视窗口)。如果祖先元素中有多个元素具备定位模式,那么是相对离自己最近的祖先元素进行偏移。
定位前
定位后
绝对定位的特点是元素完全脱离文档流,会使内联元素具备块特征以此来支持宽高的设置;也会使块元素具备内联的特征让其默认宽根据内容决定。
固定定位(fixed)
固定定位始终都是相对于整个浏览器窗口进行定位,它不受浏览器滚动条和祖先元素的影响,同时还将具备了绝对定位的特点。
粘性定位(sticky)
元素在没有到达指定位置时,不具备定位效果,到达指定位置,会变成固定模式。
附:与定位搭配使用的z-index : auto |number
用于检索或设置对象的层叠顺序,,取值可正可负,在多个元素叠加显示时,number数值越大,元素越靠上层。只针对具有定位属性的元素起作用。
这次的介绍就到这了,希望对大家有所帮助,谢谢!