毋庸置疑,CSS 中的 定位 对于从事重构或者前端的人来说,其占用非常重要的地位,但是对于初学者来说,却又有几点不是很清楚,这里就向大家介绍下 CSS  中的 定位 是如何工作的。

首先,我们来看下,什么是 定位。

当浏览器下载页面内容的时候,按下载的 HTML 页面内容的顺序(例如,html、body、head、div、p等),同时就开始渲染页面,而 定位 则就是决定这些元素如何显示,例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位,这里一共有4种方式来定义 定位,其分别是:static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。

Static 定位

即静态定位,也就是在制作 HTML 页面时,元素如何排列,则定位就如何排列。从上往下的顺序。没什么可解释的。

Relative 定位

即相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TOP、RIGHT、BOTTOM、LEFT进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
更多…