229节---------4月24日

定位

含义：将盒子定在某个位置。所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

• 定位模式用于指定一个元素在文档中的定位方式
• 边偏移则决定了该元素的最终位置

---

定位模式

定位模式决定元素定义方式，通过position 设置，有以下四个值

• static静态定位
• relative相对定位
• absolute绝对定位
• fixed固定定位

---

边偏移

就是定位的盒子的最终位置，有top,bottom,left,right四个值

如top：80px 指的是距离父元素上边线的距离

只有在定位时才能使用

---

静态定位

默认定位方式，无定位的意思

语法：

选择器{position：static；}

• 静态定位按照标准流特性摆放位置，它没有边偏移
• 很少使用

---

相对定位

是元素在移动位置时，相对它原来的位置来说的

语法：

选择器{position：relative；}

特点：

• 它是相对于自己原来的位置来移动的（参照点是自己原来的位置）
• 原来在标准流的位置继续占有，后面的盒子仍然以标准的方式对待他（不脱标）

---

绝对定位

绝对定位是元素在移动位置时，是相对于它祖先元素来说的（拼爹型）

语法：

选择器{position；absolute；}

特点：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
• 如果父元素有定位（相对，绝对，固定），则以最近一级的有定位祖先元素为参考点位置
• 绝对定位不再占有原来的位置（脱标）

---

子绝父相

子级使用绝对定位，父级则需要相对定位

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位