CSS absolute、position 定位

absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下:

  1. 没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点。

  2. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下:

  (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定,上面例子绿色部分。

  (2). 父级有 position 属性,父级的“坐标原始点”为原始点。

  relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用。