盒模型的定位方式
我们来了解盒模型的三种定位方式，分别是相对定位，绝对定位和固定定位。以下便是三种定位方式的相关概念；
相对定位 概念：使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位，除了要将position属性值设置为relative外， 还需要指定一定的偏移量。其中，水平方向的偏移量由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。
绝对定位 概念:相对于已经定位的上层元素(即设置了position属性的上层元素)进行定位；若上层元素未定位，则向更上层寻找已定位元素，直至根元素。(盒子本体会脱离文档流)
固定定位 概念:只相对于浏览器窗口进行固定定位(会脱离文档流)，无论页面是否上下滚动，其定位均是固定的。
我们以三组代码来进行了解相对定位，绝对定位和固定定位。
以相对定位开始，相关代码如下：
<title>相对定位</title>
<style>
img {
width: 100px;
height: 100px;
}
/* 第一个图片 - 红色边框 - 演示未定位时的默认状态 */
#img1 {
border: 4px red solid;
/*
相对定位：让元素相对于其原始位置进行定位
特点：元素原本占据的文档流空间依然保留，不会被其他元素占据 */
position: relative;
/* left: 50px;
四个方向的偏移属性：
- left: 正值向右，负值向左
- right: 正值向左，负值向右
- top: 正值向下，负值向上
- bottom: 正值向上，负值向下
注意：偏移是相对于元素原来的位置，而不是相对于父容器 */
/* top: -50px; */
/* left: 50px; */
}
/* 第二个图片 - 绿色边框 - 演示相对定位 */
#img2 {
border: 4px green solid;
/* 相对定位：相对于元素原本的位置进行偏移 */
position: relative;
/* left: 50px; */
/* 重点说明：即使盒子相对定位到别处很远，其文档流位置依旧保留！
也就是说，虽然视觉上它移动了，但原本占用的空间依然保留不动，
后续元素不会填补这个空位 */
top: 150px;
}
/* 第三个图片 - 蓝色边框 - 演示未定位时的默认状态 */
#img3 {
border: 4px blue solid;
position: relative;
/* left: -50px; */
/* top:-50px; */
}
</style>
</head>
<body>
<!-- 三个演示用的图片，使用不同的边框颜色区分 -->
<img src="./img_src/photo1.jpg" id="img1">
<img src="./img_src/photo1.jpg" id="img2">
<img src="./img_src/photo1.jpg" id="img3">
</body>
一、代码整体作用
用三张带颜色边框的图片，演示 position: relative 核心效果：元素偏移，但原位置保留，不脱离文档流。
二、关键属性解释
1.position: relative：开启相对定位，元素以自身原始位置为基准偏移。
2.偏移规则- top：正值向下，负值向上
3.left：正值向右，负值向左
4.right：正值向左，负值向右
5.bottom：正值向上，负值向下
6.偏移只改变视觉位置，不改变文档流中的位置。
三、核心特性
1. 不脱离文档流，原位置空间保留，后面元素不会向前递补。
2. 只相对于自己原来的位置偏移，不是相对于父容器。
3. 只设置 relative 不写偏移，元素不会移动。
我们可以通过三色边框、有无偏移的对比，直观知道：
相对定位 = 视觉移动 + 占位保留 + 不影响其他元素布局
其次以绝对定位开始，相关代码如下：
<style>
/* 父容器 - 灰色背景 */
.container {
width: 400px;
height: 400px;
background-color: gray;
/* 绝对定位：相对于最近的已定位（配置了position属性）上层元素定位
如果没有已定位的上层元素，继续往上找，则相对于浏览器窗口定位 */
position: absolute;
left: 100px;
/* 距离窗口左侧100px */
top: 100px;
/* 距离窗口顶部100px */
}
/* 第一个子元素 - 红色 */
#div1 {
width: 100px;
height: 100px;
background-color: red;
/* 绝对定位：相对于已定位的祖先元素（container）定位
特点：脱离文档流，不保留原本的空间，后续元素会填补空位 */
position: absolute;
left: 50px;
/* 相对于父容器左侧偏移20px */
top: 50px;
/* 相对于父容器顶部偏移20px */
opacity: 0.75; /* 设置透明度（0-1之间） */
}
/* 第二个子元素 - 绿色 */
#div2 {
width: 75px;
height: 75px;
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
/* 第三个子元素 - 蓝色 */
#div3 {
width: 50px;
height: 50px;
background-color: blue;
/* 相对定位：演示默认的文档流布局（未开启绝对定位） */
/* position: absolute; */
/* left: 20px; */
/* top: 20px; */
}
</style>
</head>
<body>
<!-- 父容器包裹三个子div -->
<div class="container">
<!-- 红色div：开启绝对定位，脱离文档流 -->
<div id="div1"></div>
<!-- 绿色div：未开启定位，遵循正常文档流布局 -->
<div id="div2"></div>
<!-- 蓝色div：未开启定位，遵循正常文档流布局 -->
<div id="div3"></div>
</div>
</body>
这段代码用于演示 position: absolute 核心效果：元素完全脱离文档流，不占位置，后面元素会自动递补；定位参考最近的“已定位父级”。
一、各部分代码含义解释
1. 灰色父容器 .container
设置了 position: absolute; left:100px; top:100px
1.1 含义：父容器本身也开启绝对定位，相对于浏览器窗口定位，距离窗口左100px、上100px。
1.2作用：给内部子元素提供定位参考（成为“已定位祖先”）。
2. 红色盒子 #div1，开启 position: absolute; left:50px; top:50px
2.1含义：相对于已定位的父容器偏移，左50px、上50px。
2.2特点：完全脱离文档流，不占空间，后面元素会顶上来。
2.3opacity：设置半透明，方便观察层叠效果。
3. 绿色盒子 #div2
3.1同样开启绝对定位，相对于父容器偏移。
3.2作用：演示多个绝对定位元素可自由叠加、互不干扰。
4. 蓝色盒子 #div3
4.1未开启绝对定位，保持标准文档流。
4.2作用：对比展示：绝对定位元素“飘走”后，普通元素会自动填补空位。
二、相关内容
1. 定位参考规则
绝对定位元素，会向上查找最近的、设置了 position（非static）的祖先元素作为定位基准；
如果找不到，最终相对于浏览器窗口定位。
2. 偏移属性规则
-left：正值向右，负值向左
-top：正值向下，负值向上
- 偏移基准是父容器的内边缘，不是自己原来的位置。
3. 核心特性
- 完全脱离文档流，不保留原位置空间。
- 后面的元素会向前递补，像“排队时前面的人走了，后面的人补上”。
- 可与其他绝对定位元素层叠、重叠。
- 必须配合已定位父级，才能实现“相对于父容器定位”。
我们可以通过父容器定位 + 三色子盒子对比，直观知道：
绝对定位 = 脱离文档流 + 不占位 + 参考已定位父级 + 后面元素自动补齐
<style>
/* 通用样式：所有div盒子 */
div {
width: 250px;
height: 250px;
background-color: red;
margin-bottom: 50px; /* 盒子之间的间距 */
}
/* 第三个盒子 - 绿色 - 固定定位 */
#div3 {
width: 200px;
height: 200px;
border-radius: 11px; /* 圆角边框 */
background-color: green;
/* 固定定位：相对于浏览器窗口定位
特点：元素固定在窗口的指定位置，滚动页面时位置不变
也会脱离文档流，不保留原始空间 */
position: fixed;
left: 100px; /* 距离窗口左侧100px */
top: 100px; /* 距离窗口顶部100px */
}
/* 第五个盒子 - 橙色 - 固定定位 */
#div5 {
width: 250px;
height: 250px;
border-radius: 22px; /* 圆角边框 */
background-color: orange;
/* 固定定位：相对于浏览器窗口定位 */
position: fixed;
left: 150px; /* 距离窗口左侧150px */
top: 150px; /* 距离窗口顶部150px */
}
</style>
</head>
<body>
<!-- 20个div盒子，用于演示滚动效果 -->
<!-- 其中div3和div5使用固定定位，滚动页面时它们会保持在屏幕固定位置 -->
<div>盒子1</div>
<div>盒子2</div>
<div id="div3">盒子3(固定定位)</div> <!-- 绿色，固定在窗口左上角 -->
<div>盒子4</div>
<div id="div5">盒子5(固定定位)</div> <!-- 橙色，固定在窗口 -->
<div>盒子6</div>
<div>盒子7</div>
<div>盒子8</div>
<div>盒子9</div>
<div>盒子10</div>
<div>盒子11</div>
<div>盒子12</div>
<div>盒子13</div>
<div>盒子14</div>
<div>盒子15</div>
<div>盒子16</div>
<div>盒子17</div>
<div>盒子18</div>
<div>盒子19</div>
<div>盒子20</div>
</body>
这段代码用于演示 position: fixed 固定定位的核心效果：元素固定在浏览器窗口，页面滚动时位置不变，并且脱离文档流、不占位置。
一、样式部分解释
1. 通用 div 样式- 统一设置宽、高、背景色、底部间距。
- 作用：让所有盒子默认从上到下依次排列，形成标准文档流。
2. 绿色盒子 #div3- 设置 position: fixed 开启固定定位。
- left:100px; top:100px ：距离浏览器窗口左侧 100px、顶部 100px。
- 加了圆角，方便视觉区分。
- 特点：脱离文档流，不占位置，滚动不动。
3. 橙色盒子 #div5- 同样是 position: fixed 。
- 偏移值不同，位置叠加在绿色盒子附近。
- 作用：演示多个固定定位元素可同时悬浮在窗口，互不影响。
- 参考对象：只相对于浏览器可视窗口定位，和父元素、页面滚动无关。
- 偏移规则：left/right/top/bottom 都是相对于窗口边缘计算。
- 脱离文档流：不保留原来位置，后面的元素会自动向前补齐。
- 滚动特性：页面上下滚动时，元素始终钉在窗口同一位置。
我们可以通过大量普通盒子 + 两个固定定位盒子，直观展示：
固定定位 = 钉在窗口 + 滚动不动 + 脱离文档流 + 不占位
通过以下我们对三种定位的了解，我们进行一个优缺点总结
一、相对定位 relative
优点：
1.不破坏文档流：原位置保留，不会影响其他元素布局
2.安全稳定：适合微调位置，不容易出错
3.可做绝对定位父容器（子绝父相），是布局必备
缺点：
1.只能相对于自己移动，不能自由放在父容器任意位置
2.无法实现悬浮、覆盖、弹窗等需要脱离文档流的效果
适用于元素轻微偏移、图标对齐、给子元素做定位参考
二、绝对定位 absolute
优点：
1.自由度极高：可放在父容器任意位置
2.脱离文档流：不占空间，可做覆盖、悬浮、角标等效果
3.配合父 relative 非常稳定（子绝父相）
缺点：
1.脱离文档流：会导致父容器高度塌陷，可能遮挡内容
2.必须依赖已定位父元素，否则会相对于窗口定位，容易乱跑
3.多个绝对定位元素可能重叠，需要控制层级 z-index
适用于悬浮按钮、角标、弹窗、下拉菜单、图片覆盖层
三、固定定位 fixed
优点：
1.永远固定在窗口，滚动页面也不动
2.完全脱离文档流，不占页面布局空间
3.实现固定导航/返回顶部最简单
缺点：
1.完全不受父元素控制，只认浏览器窗口
2.可能遮挡页面内容，需要留 padding/margin 避免被盖住
3.移动端有时会出现兼容问题（如弹出键盘时错位）
适用于固定导航栏、返回顶部、悬浮客服、侧边工具栏
同时，我们通过以上的理解，可以获得一个非常实用的技巧：
1. 只想微调位置、不影响布局 用 relative
2. 想自由摆放、悬浮覆盖 用 absolute（一定要子绝父相）
3. 想钉在屏幕、滚动不动 用 fixed
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)