HTML + CSS 核心笔记 （七）

定位

作用：灵活的 改变 盒子在网页中的 位置

实现：

1. 定位模式：position

2. 边偏移：设置盒子的位置

• left

• right

• top

• bottom

相对定位

position: relative

特点：

• 不 脱标， 占 用自己原来 位置

• 显示模式特点保持 不变

• 设置边偏移则相对 自己 原来位置移动

拓展：很少单独使用相对定位，一般是与其他定位方式配合使用

绝对定位

position: absolute

使用场景： 子 级 绝对 定位， 父 级 相对 定位（ 子绝父相 ）

特点：

• 脱标 ， 不占位

• 显示模式具备 行内块 特点

• 设置边偏移则相对 最近 的 已经定位 的 祖先 元素改变位置

• 如果祖先元素都未定位，则相对 浏览器可视区 改变位置

定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子 级向左、上移动 自身尺寸 的 一半

• 左、上的 外 边距为 –尺寸的一半

• transform: translate(-50%, -50%)

固定定位

position: fixed

场景：元素的位置在网页滚动时 不会改变

特点：

• 脱标 ， 不占位

• 显示模式具备 行内块 特点

• 设置边偏移相对 浏览器窗口 改变位置

堆叠层级 z-index

默认效果：按照标签书写顺序， 后来者居上

作用：设置 定位 元素的 层级顺序 ，改变定位元素的显示顺序

属性名： z-index

属性值：整数 数字 （默认值为0，取值越 大 ，层级越 高 ）

定位-总结

高级软件人才培训专家

高级技巧

CSS 精灵

字体图标

CSS 修饰属性

垂直对齐方式 vertical-align（行内元素或行内块元素间）

属性名： vertical-align

属性值