8_定位&锚点

一、定位属性概念

1. 定位的作用:控制元素在浏览器中的位置

2. 生活中的案例

   • 把大象放进冰箱需要几步:打开、放进去、关闭
   • 把小强吊在投影仪上听课:绑起来、吊上去、嘲笑他

3. 定位需要的条件

   • 大象:需要移动位置的对象
   • 冰箱:参照物
   • 方向:前端方向

4. 定位的属性:position 定位、位置

5. 定位的属性值

   • static 默认值 静态定位
   • relative 相对定位
   • absolute 绝对定位
   • fixed 固定定位
   • sticky 粘性定位

二、相对定位属性的使用

相对定位属性的使用

1. 属性:position

2. 属性值:relative

3. 相对定位属性的特点

   • 相对定位的参照物是元素初始位置
   • 不会脱离文档流,初始布局不会被破坏

4. 之前学习的移动元素方法

   • margin 外边距:需要和父级包含框相接触
   • 定位没有方向上的限制

5. 作用:为了给绝对定位提供参照物的(工具人)

三、绝对定位属性的使用

绝对定位属性的使用

1. 属性:position

2. 属性值:absolute

3. 绝对定位属性的特点

   • 绝对定位的参照物(父相子绝)<