前言：本文主要将css中的盒子定位仔细分析一下，希望能够帮助大家。有对前端感兴趣的朋友可以关注我的头条帐号。

1.位置属性Position的基本概念

2.取值fixed的应用场景和用法、以及偏移属性的用法

3.取值absolute的应用场景和用法、以及谁能作为包含块

4.取值relative的应用场景和用法

5.取值static的应用场景和用法

6.定位总结对比

1.位置属性Position的基本概念

1.1. 概念理论

1.2. CSS的三种定义机制以及第一种定位机制普通流

1.3. CSS的第二种定位机制浮动

1.4. CSS的第三种定位机制绝对定位

2.取值fixed的应用场景和用法、以及偏移属性的用法

2.1. 应用场景举例

2.2. 官方文档解读

2.3. 示例验证

2.3.1.标签部分

2.3.2.没定位前的样式

2.3.3.没定位前的效果

2.3.4.测试1,只启动固定定位属性

2.3.4.1.样式部分

2.3.4.2.观察1

2.3.4.3.观察2

2.4.偏离位置top\right\bottom\left的理解

2.4.1.回顾background-position中top\right\bottom\left

2.4.2. 以left和top为例，解读偏离的含义

（1）参照物是谁(以图中的A标签为参照)?

（2）以参照物的哪个方向为基准偏移点(left\top)？

（3）沿着基准点的正方向还是负方向偏移(B为正偏移，C为负偏移)？

（4）偏移多少个单位 （B:left:50px,top:80px; C:left:-200px,top:-150px）？

2.5.启用偏移属性的示例1

2.5.1.官方文档

2.5.2.修改样式部分

2.5.3.效果1

2.5.3.效果2

2.6.启用偏移属性的示例2

(1)、grandson2从送son2中脱离出来，观察与原位置的变化；

(2)、 脱离文档流后，后续标签的起始位置，(即大领导调离后，老二上位，类似float)。

2.6.1.标签的代码部分

2.6.2. 观察部分省略

2.7.完整代码

见下一个主题【主题三】的代码部分

3.取值absolute的应用场景和用法、以及谁能作为包含块

3.1. 应用场景

3.2. 官方文档解读

3.3.包含块的理解

3.4.示例1

3.4.1.标签部分

3.4.2.未定位前的样式部分

3.4.3.未定位前的效果部分

3.4.4.设置grandson22和grandson32 的绝对定位和偏移

3.4.5.效果

4.取值relative的应用场景和用法

4.1.官方文档

4.2.实际用途

【实际使用时，只作为包含块使用】，因此只有positive:relative;没有偏移的设置。

4.3.示例

见上述positive:absolute的例子。

5.取值static的应用场景和用法

5.1.官方文档

5.2.实际应用

当需要取消以前的定位时，通过设置position:static即可。【即取消定位】。

6.定位总结对比

(1)、 正常文档流正常定位，块状元素垂直方向依次排放，行内元素水平方向依次排放；

(2)、浮动元素，浮动后不完全脱离文档流，浮动定位；

(2.1) 脱离文档流，进入 z轴，变成行内块；

(2.2) 以父框为包含块，在包含块内左右浮动；

(2.3)包含块内首个浮动的，Y轴不变，左右浮动；

(2.4)后面连续同方向浮动的，首位相接，排队；

(3)绝对定位

(3.1) 固定定位，以浏览器视窗为包含块，包含块内找参照边、沿参照边的正负方向偏移指定单位的距离；多用于不受滚动条影响的广告位等。

(3.2) 绝对定位，以最近直系先祖中含非static的定位标签为包含块，包含块内找参照边、沿参照边的正负方向偏移指定单位的距离；多用于标签重叠，后代标签跨代对齐偏移；

(3.3) 相对定位，以自身位置为参照物，主要用于作为后代标签的包含块。

(3.4) 静态定位，没有定位，或者取消定位。

喜欢的朋友，请关注我的头条帐号，本文由AAA学术部出品，转载请注明！有需要代码和视频的朋友请关注我之后私信发送“定位”两字，必回！