CSS:absolute绝对定位

GeXueliu

已于 2022-04-22 16:12:05 修改

阅读量649

点赞数

分类专栏： Css 文章标签： css

于 2022-04-09 13:29:20 首次发布

本文链接：https://blog.csdn.net/GeXueliu/article/details/124059113

版权

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

摘要由CSDN通过智能技术生成

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;