5. 绝对定位

5.1 概述&入门案例

绝对定位：通过设置边偏移，直接将元素放置在页面内或父元素内的某一位置。

注意：绝对定位元素，将不占用标准流位置

语法：

选择器{

position: absolute;

}

准备代码：（将为绿色 div 设置绝对定位）

 代码实现及效果 1：

 代码实现及效果 2：

小结：

1 、 绝对定位元素不占用标准流位置，不影响标准流布局（也不影响浮动）

2 、 绝对定位元素 展示效果 高于标准流（也高于浮动）

3 、 绝对定位边偏移起始位置：默认为页面左上角

5.2 进阶案例 1：父子关系中的绝对定位

5.2.1 概念及准备代码

绝对定位在未引入父子元素时，默认的边偏移起始为：页面左上角。

父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角

准备代码：

5.2.2 示例 1：父元素没有定位

示例 1：父元素没有定位

小结：

父元素没有定位（相对、绝对、固定），子元素边偏移从页面左上角开始

5.2.3 示例 2：父元素有定位

示例 2：父元素有定位。

小结：

父元素有定位（相对、绝对、固定），子元素边偏移 从定位父元素 左上角开始

5.2.4 示例 3：祖父和父元素都有定位

示例：祖父和父元素都有定位

小结：

祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始

5.2.5 进阶小结

父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角

5.3 进阶案例 2：子绝父相

为保持父元素在原有文档流定位，为子元素能在父元素中任意放置。

布局中有 “子绝父相” 之说。

子绝父相：子元素绝对定位，其父元素用相对定位。

准备代码：

小结：

父子定位中，通常为了布局的便捷，我们会采取“子绝父相”的布局手法。

5.4 总结

1 、绝对定位元素不占用标准流位置，不影响标准流布局（也不影响浮动）

2 、绝对定位元素 展示效果 高于标准流（也高于浮动）

3 、父元素没有定位（相对、绝对、固定），子元素边偏移从页面左上角开始

祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始

4 、 为了布局方便，更多采取： 子绝父相