盒子定位：绝对定位-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87197766/article/details/142886827

1、概念：相对于已经定位的上层元素（即用了position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直至根元素（脱离文档流）。绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。

2、CSS代码添加position:absolute

3、水平方向的偏移量由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

注:①两个方向各选一个参数即可定位；

②定位的数值可以为负数；

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

4、相对定位示例

代码如下：

 <head>
        <style>
            #div1{
                width: 100px;
                height:100px;
                background-color: red;
                position: absolute;
                left: 100px;
                top: 100px; 
                
            }
            #div2{
                width: 100px;
                height: 100px;
                background-color: green;
                
            }
            #div3{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            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>

运行结果：

没有添加绝对位置结果如下：

对比两个运行结果可以看出绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。可以想象红绿蓝三个人一起去食堂打饭，然后红突然不想吃了然后在旁边等绿蓝，红离开刚刚排队那个位置，绿就排上了红刚刚的位置，蓝就排上绿的位置，食堂阿姨一直低头打饭，不知道刚刚发生蓝什么，在阿姨看来就只有绿蓝在排队等待打饭，不知道刚刚红也排过队。