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

小k鏖

已于 2024-10-31 19:06:12 修改

阅读量584

点赞数 12

文章标签： html 前端 css

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

本文链接：https://blog.youkuaiyun.com/2301_79765198/article/details/142865060

版权

概念

绝对定位‌是指将‌HTML元素的位置通过规定其在水平和垂直方向上的位置来固定元素。绝对定位的元素不会占据空间，其位置是相对于已定位的祖先元素。如果元素没有已定位的祖先元素，则相对于整个网页（body标记或浏览器窗口）进行定位。

绝对定位的特点

‌与文档流无关‌：绝对定位的元素不会占据空间，它们可以覆盖页面上的其他元素。
‌基于最近的已定位祖先元素‌：绝对定位的元素位置是基于最近的已定位的祖先元素。如果没有已定位的祖先元素，则基于整个网页。
‌覆盖其他元素‌：由于绝对定位与文档流无关，因此可以通过z-index属性来控制这些元素的堆叠顺序。

文档流和浮层

绝对定位的元素会脱离文档流并形成一个浮层，设置了绝对定位的盒子，都会有浮层，有几个绝对定位的盒子，就有几个浮层（对其后的兄弟盒子的定位没有影响，其他盒子就好像这个盒子不存在一样，原先在正常文档流中所占的空间会关闭），不会影响其他元素的布局。

浮层概念就像你在排队买饭，突然使用了绝对定位，你就漂浮起来在上空，排在你后面的人就看不见你了，进而他就会占据你的位置，你就形成了一个浮层；再如果在你后面又有人使用了绝对定位，他就会形成另一个浮层，漂浮在你的上方

下面讲解绝对定位

下图是没有设置绝对定位的文档流排列的Div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 3px;
        }
        #div1{
            background-color: mediumpurple;
 
        }
        #div2{
            background-color: palevioletred;
   
        }
        #div3{
            background-color: rebeccapurple;
 
        }
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <article>
        <div id="div1">红</div>
        <div id="div2">绿</div>
        <div id="div3">蓝</div>
 
    </article>
</body>
</html>

下图是设置绝对定位的文档流排列的Div元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置了绝对定位的盒子，都会有浮层
        有几个绝对定位的盒子，就有几个浮层 */
        div{
            width: 100px;
            height: 100px;
            margin: 3px;
        }
        /* 上层元素为article */
        #div1{
            background-color:  mediumpurple;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        #div2{
            background-color: palevioletred;
   
        }
        #div3{
            background-color: rebeccapurple;
 
        }
        /* 上层元素为html */
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <!-- 根据上层元素为基准进行偏移 -->
    <article>
        <div id="div1">红</div>
        <div id="div2">绿</div>
        <div id="div3">蓝</div>
 
    </article>
</body>
</html>

盒子的绝对定位 —— 排队与逃离的比喻（自己改这些position: absolute;加上top, right, bottom, 和 left属性来观察变化）

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

课堂练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            position: absolute;
            left: 600px;
            top: 100px;
        }
        #d1{
            width: 100px;
            height: 100px;
            background-color: white;
            position: absolute;
            left: 150px;
            top: 200px;
 
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: white;
 
            position: absolute;
            right: 150px;
            top: 200px;
 
        }
        #d3{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            right: 250px;
            top: 350px;
 
        }
        #d4{
            width: 50px;
            height: 50px;
            background-color: rebeccapurple;
            position: absolute;
            right: 275px;
            top: 375px;
 
        }
        #d5{
            width: 300px;
            height: 100px;
            background-color: white;
 
            position: absolute;
            right: 150px;
            top: 475px;
 
        }
    </style>
</head>
<body>
    <article>
        <div id="d1" ></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
 
    </article>
</body>
</html>