CSS中position的定位主要分为静态定位,相对定位,绝对定位和固定定位,属性值分别为:static,relative,absolute,fixed。
元素的位置通过 "left","top","right","bottom" 属性进行设置,优先级为:top>bottom,left>right。
static:静态定位。
它是position的默认值,一般不设置position属性时,元素会按照正常的文档流进行排列。
relative:相对定位。
relative属性,我们只要搞清它是相对哪个对象来进行偏移的就ok了,答案是它原本的位置。需要注意的是,相对定位不会脱离文档流,原来的位置仍然被保留。
absolute:绝对定位。
它是相对不是static的最近一级父元素来进行定位的。
如果没有这样的元素,那么就相对body元素来进行定位,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置。
我们可以这样理解:
假设一个div元素,他所有的父级元素属性都是position:static,也就是所有父级元素都没有设置position,那么这个div就会相对body元素来进行定位。如果这个div元素存在某一个父级元素设置了除static以外的position,那么这个div就会相对这个父元素来进行定位。
绝对定位和相对定位的区别在于定位的原点不同。
绝对定位是指通过指定某个元素相对于整个页面的位置进行定位。
而相对定位则是指通过指定某个元素相对于自身原位置的偏移量进行定位。
相对定位可以用来微调页面中某个元素的位置,而绝对定位可以用来实现浮动菜单、悬浮广告、轮播图等一些需要位置固定的场景。
但当页面内容发生变化时,使用绝对定位会导致定位元素位置失调,而相对定位则不会。
因此,在选择使用哪种定位方式时需要根据具体需求来决定。