HTML CSS position 属性及relative、absolute、fixed区别

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是相对于浏览器窗口的位置偏移,很好理解,实际也非常实用,比如某一块内容固定在浏览器的某一个位置,永远在这个位置。最简单例子就是,返回顶部、底部按钮功能性业务。
在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章