盒子的定位：绝对定位（脱离文档流）

Komorebi⁼

已于 2024-10-14 13:44:39 修改

阅读量1.8k

点赞数 47

文章标签： html css html5

于 2024-10-12 12:00:00 首次发布

本文链接：https://blog.csdn.net/2302_81659011/article/details/142850781

版权

一、概念

绝对定位会脱离文档流，相对于已经定位的上层元素（position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直到根元素。

二、语法

选择器{position: absolute;}

与相对定位一致，

使用left、right改变其水平位置，使用top、bottom改变其垂直位置

left定位元素和定位元素的左边距离，right定位元素和定位元素的右边距离

top定位元素和定位元素的上边距离，bottom定位元素和定位元素的下边距离

三、绝对定位的使用

当我们为一个元素设置绝对定位时，这个元素就会脱离文档流。这意味着它不再占据文档流中的空间，其他元素会无视它的存在而进行布局。

这样说或许不太好理解，就如同排队一样，每个人都按照先来后到的顺序依次站立，这就如同网页中的元素在正常文档流中的排列。但突然有一个人被拎出了队伍，放到了一个特定的位置，不再受队伍顺序的影响，这个人就相当于被设置了绝对定位的元素。

（1）原代码如下：

<head>
    <style>
     div{
                width: 100px;
                height: 100px;
                margin: 3px;

            }
            #div1{
                background-color: red;

            }
            #div2{
                background-color: green;
            }
            #div3{
                background-color: blue;
            }
    </style>
   
    
</head>
<body>
    <p>窗口1</p>
    <div id="div1">A</div>
    <div id="div2">B</div>
    <div id="div3">C</div>
</body>
</html>

运行结果如下：

（2）为#div2元素设置绝对定位（position: absolute）也就是将上面的绿色盒子B拎出来

代码如下：

<head>
    <style>
     div{
                width: 100px;
                height: 100px;
                margin: 3px;

            }
            #div1{
                background-color: red;

            }
            #div2{
                background-color: green;
                position: absolute;
                left: 250px;
                top: 58px;
            }
            #div3{
                background-color: blue;
            }
            #p1{
                display: block;
                padding-left: 250px; 
            }
    </style>
</head>
<body>
    <b>窗口1</b> <b id="p1">窗口2</b>
    <div id="div1">A</div>
    <div id="div2">B</div>
    <div id="div3">C</div>
   
</body>
</html>

运行结果如下：

为B设置绝对定位后，B被拎出来，而此时原来在B下面的C则会占据B的位置。

四、浮层效果

绝对定位常常被用来创建浮层效果。比如一个弹出的对话框、一个菜单或者一个提示框。这些浮层就像是排队中的那个人被放到了队伍的上方或者旁边，独立于队伍之外，却又能吸引人们的注意力。它们可以覆盖在其他元素之上，不受文档流中元素的影响，给用户提供特定的信息或交互功能。

为了更清晰的看出浮层效果，我将A的偏移像素调小使他在B的上方，代码如下：

<head>
    <style>
           div{
                width: 100px;
                height: 100px;
                margin: 3px;
 
            }
            #div1{
                background-color: red;
                width: 50px;
                height: 50px;
                position: absolute;
                left: 50px;
                top: 50px;

            }
            #div2{
                background-color: green;
                
            }
            #div3{
                background-color: blue;
            }
            article{
                width: 500px;
                height: 500px;
                background-color: gray;
                position: absolute;
                left: 100px;
                top: 100px;
               
            }
    </style>
</head>
<body>
    <article>
        <div id="div1">A</div>
        <div id="div2">B</div>
        <div id="div3">C</div>
    </article>
    
   
</body>
</html>

运行结果如下：

给A红色盒子添加绝对定位元素后则有了浮层，B绿色盒子则占据A红色盒子原来的位置，其中A红色盒子的移动位置是相对于它的上层元素article（即灰色盒子）而言的。

五、特点

1、如果父级元素有定位，则以最近一级的有定位父级元素为参考点移动位置；若没有父级元素或父级元素没有定位，则以浏览器为准定位；

2、绝对定位会脱离文档流，不占有原先位置，不会对其周围的元素布局产生影响。

3、设置了绝对定位的盒子，都会有专属的浮层，有几个绝对定位的盒子，就有几个浮层。

六、总结

绝对定位在 CSS 布局中有着重要的作用。它可以让我们灵活地控制元素的位置，实现各种独特的布局和交互效果。就像排队中的特立独行者一样，绝对定位的元素在网页中也能展现出与众不同的魅力。

可以利用绝对定位的特性，制作下面的图案

代码如下：

<!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: 500px;
            height: 500px;
            background-color: gray;
            position: absolute;
                left: 100px;
                top: 100px;
        }
        #div1{
                width: 50px;
                height: 50px;
                background-color: white;
                position: absolute;
                left: 100px;
                top: 100px;

            }
            #div2{
                width: 50px;
                height: 50px;
                background-color: white;
                position: absolute;
                right: 100px;
                top: 100px;
            }
            #div4{
                width: 25px;
                height: 25px;
                background-color: green;
                position: absolute;
                left: 12.5px;
                top: 12.5px;
            }
            #div3{
                width: 50px;
                height: 50px;
                background-color: red;
                position: absolute;
                left: 225px;
                top: 225px;
            }
            #div5{
                text-align: center;
                width: 300px;
                height: 50px;
                background-color: white;
                position: absolute;
                left: 100px;
                bottom: 100px;

            }
    </style>

</head>
<body>
    <article>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3">
            <div id="div4"></div>
        </div>
        
        <div id="div5"></div>
    </article>
</body>
</html>

其中鼻子（红绿盒子）利用绝对定位的浮层效果，使绿色盒子位于红色盒子上方。为了更方便的使绿色盒子位于红色盒子的中间，我们可以在红色盒子（#div3）内再加一个盒子（#div4），使其称为绿色的上层元素。