盒子的绝对定位（用排队的比喻，讲解脱离文档流和浮层，相对于已定位上层元素偏移的实验讲解)

小k鏖

于 2024-10-11 23:32:18 发布

阅读量289

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_79765198/article/details/142865060

版权

盒子的绝对定位 —— 排队与逃离的比喻

绝对定位(position: absolute)就好比一个人突然从长长的队伍中逃出来，寻找一个他觉得更好的位置站定。不同于相对定位，绝对定位的元素不仅离开了原有的队列（文档流），而且它的位置也不会受到原队列中其他人（元素）的影响。相反，它可以自由选择相对于其“锚点”(已定位的祖先元素)的位置站立。

脱离文档流：从队伍中“逃出”
想象一下，你正在排队买票，队伍中的每个人都有自己的位置，这个队伍就相当于网页中的文档流，每个元素（人）按照HTML代码的顺序排列。当你决定“逃离”队伍去寻找一个更优的位置时（即使用position: absolute），你就脱离了文档流。这意味着，你原来的位置被后面的人（元素）填补，不再对队伍（其他元素）产生影响。
形成浮层：独立于队伍之外
一旦你“逃离”了队伍，你不再受队伍规则的约束。在网页布局中，这意味着你不再占据文档流中的空间，而是在页面上形成了一个独立的“浮层”。这个浮层可以位于页面的任意位置，不会影响原本队伍中其他人的位置（即不会影响其他元素的布局）。
实验：相对于已定位上级元素的偏移
假设你逃离了队伍，但不是随意移动，而是找到了一个相对于队首（已定位的上级元素）特定位置站立。在CSS中，这可以通过position: absolute;加上top, right, bottom, 和 left属性来实现。
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Positioning Example</title>
<style>
  .queue {
    position: relative; /* 队首，已定位的祖先元素 */
    width: 500px;
    height: 100px;
    background: #ddd;
    margin: 20px auto; /* 保证在页面中居中显示 */
  }
  
  .box {
    position: absolute; /* 脱离文档流 */
    top: 50px; /* 相对于已定位祖先元素的垂直偏移 */
    left: 100px; /* 相对于已定位祖先元素的水平偏移 */
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
</head>
<body>

<div class="queue">
  <div class="box">Box</div>
</div>

</body>
</html>

运行结果

分析
1.position: relative;：定义了队首元素（祖先），它自身位置不变，但为内部绝对定位的元素提供了参照点。
2.position: absolute;：元素脱离了文档流，不再占据位置；top和left属性用于定义相对于已定位祖先元素的位置。
结论
绝对定位使元素完全脱离文档流，赋予了元素前所未有的自由，使其能跳出文档流的约束，形成独立的浮层，可以在页面上自由定位，精准定位到页面的任何角落，不受其他元素影响。通过相对于已定位的上级元素偏移，可以实现更精确的布局控制，是网页设计中实现复杂布局的关键技术。这种特性非常适合那些需要特别强调或独立展示的页面元素，如弹窗、侧边栏和固定菜单等。通过掌握绝对定位的原理和实践，开发者可以获得更大的布局操控能力，从而创作出更加丰富和交互式的网页设计。绝对定位提供了高度的布局灵活性，但也需要谨慎使用，以避免页面布局过于混乱或覆盖其他重要元素。通过理解其原理和正确应用，可以极大地丰富网页的视觉效果和用户体验。