position 是一个比较实用的功能,网页编程中必备技能!
在页面的编写过程中我们通常会用到html的position属性来合理安排我们标签的位置,来达到视觉的美观,所以我们需要加深对position这个属性的了解。
一、Position的属性值
position有四个值:static,relative,absolute,fixed;
定义看着云里雾里,下面具体说明
二、static
static就是html默认的文档流形式,一个块状元素独占一行如div、p,多个内联元素占一行如span、a;
实际实用确实不多,基本不使用。
三、relative
relative是相对于标签原来的位置偏移,请看图:
其实就是相对于自己的位置的改变,可以理解为自身的移动,偏移位置
四、absolute
absolute是相对于不是默认文档流形式的父类元素的位置偏移,如果父类元素是static的话,那就看父类元素的父类元素是不是非static的,一直找到body为止。
实际实用过程非常多,也是最多的。可以理解为相对于父亲元素的定位,那么在每个div里面,相同系列的每个模块特定位置展示出来,非常实用。
比如价格相对于父布局总是在同一个位置,就可以用这个属性来实现。
五、fixed
fixed是相对于浏览器窗口的位置偏移,很好理解,实际也非常实用,比如某一块内容固定在浏览器的某一个位置,永远在这个位置。最简单例子就是,返回顶部、底部按钮功能性业务。