CSS定位方式
CSS中关于定位的属性:position
其中position包含的属性值主要有五种:static/relative/absolute/fixed/sticky
一:static静态定位
static是position的默认定位方式,当你省略position属性,游览器会默认定位方式为static。
游览器会按照正常的页面流来放置,也就是按照正常的源码顺序放置区块,其中每个区块会单独占据占据一块区域,不会发生重叠。
二:relative相对定位
relative定位参照物为自身,即参照自身做位置的偏移,它需要借助left/right/top/bottom四个属性来指定偏移的位置。
当元素设置相对定位relative后,它的区块在页面上的显示位置会发生偏移,可能完全远离自身的先前位置,但游览器还会替它保留原先的位置,不会发生后边的区块替补的情况。
举例来说就像是教室中一人一桌,但下课时间,学生出去解决生理或心理问题不在座位上,也不会有其他学生占据原本属于他的位置。
因此,相对定位并不会影响整个文本流的顺序。
三:absolute绝对定位
拥有absolute定位的元素的参照物为必须有父元素,且父元素必须具有除static之外的定位,否则absolute定位参照物将会变为整个网页。
与relative相对定位相同的是它也需要借助left/right/top/bottom四个属性来指定偏移的位置。
当元素设置absolute绝对定位后,它的位置将会参照父元素产生,脱离原先的文本顺序,在页面中一个新的地方显示。游览器将会安排后边的区块进行替补。
参照之前的举例,相对定位指的是学生暂时离开自己的座位,位置依旧会属于他。而现在班主任需要按照成绩排名重新排座,他让先前的那名同学搬去教室里的第三列第四排,此时,第三列第四排的参照物就是整个教室,而当该名同学搬离他的位置之后,原本属于他的座位将不会为他保留,而是会安排给新的同学。
因此,绝对定位的元素会脱离文档流,不占据原本的位置。
四:fixed固定定位
fixed固定定位以游览器窗口做参照,他会占据窗口的一部分,脱离整个文档流,不随页面滚动而发生上移下移。
搭配left/right/top/bottom四个属性使用,代表定位在页面窗口的某个位置,以后将始终处于该位置。
固定定位fixed相当于教室内固定安装的投影设备,不论教室内学生如何变换位置,投影设备始终占据一个教室上方的固定位置。
也就是说,fixed固定定位的元素会脱离文档流,不占据页面位置,且始终不发生位置变化。
五:sticky黏性定位
sticky定位是fixed与relative两种定位方式的合并。
其功能为:当sticky定位的位置没有超出游览器窗口的范围,按照relative执行,当随着页面滚动,定位元素的位置即将超出游览器窗口时,则会改为按照fixed执行,将该定位元素固定在页面顶部或底部。
例如购物网页的搜索栏
当滚动条向下翻滚,搜索条即将滑出显示窗口时,它就会固定在窗口顶部,而当搜索条还在页面中时,则会随着滚动条翻滚而上下移动。
sticky定位必须搭配left/right/top/bottom四个属性,否则将等同于relative。