CSS:absolute绝对定位_absolute更改定位元素-优快云博客

本文链接：https://blog.youkuaiyun.com/GeXueliu/article/details/124059113

本文探讨CSS中`position:absolute`属性，介绍其特点，如脱离文档流、通过top/bottom/left/right设置位置，以及如何影响父容器。通过示例解析了绝对定位元素在不同情况下的位置表现，包括与`float`的区别、与父容器和文本对齐的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position:absolute

特点：

脱离文档流（类似浮于页面上方的效果）；
位置：位置通过top、bottom、left、right设置（相对于非static 父元素）。默认位置正常文档流的位置。
无法撑开父容器，父容器发生高度坍塌（除了显式设置父容器高度，好像没得其他办法了，这个问题待定）
绝对元素的左右侧也不会被填充成margin.
看完所有的问题，float 和absolute 均是浮动元素，那他们有什么区别呢？
下面介绍第2点：位置

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        #app {
            width: 500px;
            height: 500px;
        }
        .first {
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        .second {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="first"></div>
        <div class="second"></div> <!-- 绝对定位元素 -->
    </div>
</body>

</html>

在这里插入图片描述

second (红色边框的方块)不设置left、right、top、bottom定位时，可以看出second位置就是正常文档流里的位置。元素布局稍作修改，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        #app {
            width: 500px;
            height: 500px;
        }
        .first {
            display: inline-block; // 修改布局为行内元素
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        .second {
            display: inline-block; // 修改布局为行业元素
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="first"></div>
        <div class="second"></div>
    </div>
</body>

</html>

在这里插入图片描述
可以看到second 绝对定位元素仍然是正常文档流的位置，确认了第2点的正确性。
ok，再做个修改，来加深默认位置是正常文档流中的位置的理解

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        #app {
            text-align: center; // 设置父容器内行内元素居中
            height: 500px;
        }
        .first {
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        #app:after {
            position: absolute;
            content: "";
            display: inline-block; // 行内盒子
            width: 5px;
            height: 30px;
            background: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="first">下面是绝对定位元素</div>
    </div>
</body>

</html>

在这里插入图片描述
这里的绝对元素为什么在中央啊？不是应该在正常文档流后吗，就是在first正下方的，才对啊？实际上是放在first正下方的，但是由于此时父容器设置了text-align，所以最后位置从first正下方移到了中间。这下应该明白了。
那如果修改absolute 元素display:block，绝对元素位置会在哪里呢？