您现在的位置是: 首页 >  技术分享 > 

css基础-关于定位的分类及其应用
叶子 2022-03-08 11:55:14

作为一个后端开发人员,对css中的定位始终搞不明白,也不知如何使用。最近才发现,原来我不愿意触碰的知识点,只要用点心,就可以完全掌握,并且应用到实际项目中。回归正题,今天这篇就详细写一下关于页面布局常用到的定位问题,记录的本身就是为巩固已学过的知识,学而不思则罔,思而不学则殆。


定位的分类
在实际项目的项目中,常用的定位分为四种。
第一种:静态定位(position:static)

在DOM中,静态定位即没有定位,不可以设置偏移值(偏移值属性有:left、top、bottom、right),且元素在文档流中。如果我们不设置的话,任何元素的position属性默认值都是static。


第二种:相对定位(position:relative)
在DOM中,相对定位同样占用标准流(文档流),可通过设置偏移值改变元素所在的位置。
其偏移值是相对于自身所在的位置进行偏移。结合代码设置一下相对定位出现的情况,会更清晰一点。





    
    static和relatiive定位
    



第三种:绝对定位(position:absolute)

absolute 绝对定位
脱离文档流,相对于body进行偏移。

一般来说,绝对定位和相对定位结合使用,它相对的父级是对于relative定义的元素。relative元素必须是absolute的父级




    
    absolute
    



第四种:fixed 固定定位

脱离文档流,相当于浏览器左上角(0,0)进行偏移,与relative设定的对象无关系(即与其定义的父级定位无关系)

应用场景:固定导航(在浏览网页中,设置fixed导航,用户可以轻松回到顶部,增强用户体验感)




    
    fixed定位
    



以上,就是对定位的应用。其中,有两个脱离文档流的,分别是绝对定位和固定定位,但是绝对定位的偏移量是相对于body的,而固定定位的偏移量是相对于浏览器左上角坐标的。有两个占用标准流的,分别是静态定位和相对定位,静态定位是元素定位的默认值,不可以设置偏移量。相对定位可以设置偏移量,但相对自身所占的位置设置的。


在日常项目开发中,相对定位和绝对定位结合使用。而在导航固定的场景中,一般使用fixed固定定位。关于定位的问题,还需要在实际项目中开发中灵活应用。


如果想设置某个元素为绝对定位时,一定要找到其父级设置定位为relative。

yezismile wechat
欢迎关注博主公众号
分享:

Copyright © 2020
www.yezismile.com All rights reserved. 京ICP备15029736号-1